text-align：規(guī)定行內(nèi)內(nèi)容如何相對(duì)它的塊父元素對(duì)齊。而且它并不控制塊元素自己的對(duì)齊，只控制它的行內(nèi)內(nèi)容的對(duì)齊。要控制文本兩端對(duì)齊直接寫text-align：justify就可以 了，但是對(duì)于多行文本，除了最后一行之外都可以實(shí)現(xiàn)兩端對(duì)齊，最后一行依舊左對(duì)齊，這是因?yàn)閠ext-align不會(huì)對(duì)文本的最后一行起作用，因此對(duì)于單行文本的段落不會(huì)實(shí)現(xiàn)效果，單行文本既是第一行，也是最后一行。

text-align-last：這個(gè)屬性規(guī)定如何對(duì)齊文本的最后一行，但是這只有在text-align為justify的時(shí)候才起作用，直接設(shè)置text-align-last：justify就可以控制最后一行文本的對(duì)齊方式，但是這個(gè)方法兼容性相當(dāng)?shù)牟?#xff0c;不建議使用。

要解決這種問(wèn)題，可以人工生成兩行文本，然后把第二行隱藏，就可以實(shí)現(xiàn)兩端對(duì)齊了

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

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

方法二、利用after偽元素在后面添加一個(gè)空的內(nèi)容，并把width設(shè)為100%，將內(nèi)容撐大，然后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; }

?

轉(zhuǎn)載于:https://www.cnblogs.com/runhua/p/7106060.html

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

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。