text-align 設置 justify 后不生效

因為text-align不會處理被打斷的行和最后一行。
解決方法是使用text-align-last，並將其設置為justify。
不過不幸的是，text-align-last不是所有瀏覽器支持。

所以對於不支持text-align-last的，可以在最后一行人工生成兩行文本，然后把第二行隱藏了，那么我們要現實的第一行自然就可以實現兩端對齊了。

或者設置span為inline-block，寬度（100%），那么這個時候內聯匿名盒的寬度超過行盒，瀏覽器會將其拆成兩行，自然第一行文本的text-align效果就生效了。

 

<p class="center">我是兩端對齊文字端對齊文字<span></span></p>

.center{
  text-align:justify;
}

span{
  display:inline-block;
  width:100%;
}