text-align:justify兼容寫法


兼容測試referrer:

http://caniuse.com/#search=text-align-last

 

為什么單獨設置text-align:justify;不起作用,非要在后面加一個內聯塊狀元素寬度為100%的才可以?

<class="center">我是兩端對齊文字端對齊文字<span></span></p>
 
.center{ text-align:justify; } span{ display:inline-block; width:100%; }

這個是因為text-align不會處理被打斷的行和最后一行。因為你這里的文字只占了一行,所以也是最后一行了,所以text-align設置為justify不會產生任何效果。
解決方法是使用text-align-last,並將其設置為justify。
不過不幸的是,text-align-last不是所有瀏覽器支持。

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

而你的span是inline-block,也可以設置寬度(100%),那么這個時候內聯匿名盒的寬度超過行盒,瀏覽器會將其拆成兩行,自然第一行文本的text-align效果就生效了。你的實現剛剛好是上面的第二個實現方法。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM