1. 程式人生 > >text-align:justify無效解決辦法

text-align:justify無效解決辦法

text-align實現兩端對齊文字效果,但是要特別注意text-align不會處理被打斷的行和最後一行! 如果你的文字只佔了一行,同事它也是最後一行了,所以text-align設定為justify不會產生任何效果。 解決方法是使用text-align-last,並將其設定為justify。 不過不幸的是,text-align-last不是所有瀏覽器支援。

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

例:

我是一行字

.center{ text-align:justify; }

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