text-align：規定行內內容如何相對它的塊父元素對齊。而且它并不控制塊元素自己的對齊，只控制它的行內內容的對齊。要控制文本兩端對齊直接寫text-align：justify就可以 了，但是對于多行文本，除了最后一行之外都可以實現兩端對齊，最后一行依舊左對齊，這是因為text-align不會對文本的最后一行起作用，因此對于單行文本的段落不會實現效果，單行文本既是第一行，也是最后一行。

text-align-last：這個屬性規定如何對齊文本的最后一行，但是這只有在text-align為justify的時候才起作用，直接設置text-align-last：justify就可以控制最后一行文本的對齊方式，但是這個方法兼容性相當的差，不建議使用。

要解決這種問題，可以人工生成兩行文本，然后把第二行隱藏，就可以實現兩端對齊了

方法一、添加一個內斂塊狀元素，并設置寬度為100%，那么這個時候內聯匿名盒的寬度超過行盒，瀏覽器會將其拆成兩行，自然第一行文本的text-align效果就生效了

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

方法二、利用after偽元素在后面添加一個空的內容，并把width設為100%，將內容撐大，然后hidden它

.public{ width:80px; height:100%; display:inline-block; text-align: justify; vertical-align:top; background-color: #aaa; } .public::after{ content:""; display: inline-block; width:100%; overflow:hidden; height:0; }

?

轉載于:https://www.cnblogs.com/runhua/p/7106060.html

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的css：text-align：justify的用法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。