對(duì) text-align:justify 不大了解的，可以先看這里：從css text-align:justify 談?wù)?text-align 文本對(duì)齊方式，講的比較淺顯易懂，本篇相對(duì)深入些，最好先看前面的

寫(xiě)代碼的時(shí)候遇到這樣一個(gè)設(shè)計(jì)圖：

文字格式是兩端對(duì)齊，首先想到的是用 letter-spacing ，不過(guò)很麻煩，不太方便。實(shí)際上 text-align:justify, 可以實(shí)現(xiàn)兩端對(duì)齊！以下圖為例：

<div class="par"><span class="son">上海</span><span class="son">上海活動(dòng)</span><span class="son">內(nèi)蒙古活動(dòng)上</span> </div> * {margin: 0;padding: 0; }.par {width: 170px;overflow: hidden;border: 1px solid grey;text-align: justify;padding: 10px; }.son {font-size: 15px; } .son::after {content: '';height: 0;width: 100%;display: inline-block; }

?

注意點(diǎn)：

---

1、需要兩端對(duì)齊的元素改成了 span,內(nèi)聯(lián)元素，當(dāng)然你想用 div 也行，不過(guò)得設(shè)置 display:inline; 原理應(yīng)該很好理解，text-align 本來(lái)就是針對(duì)文字內(nèi)容樣式的，當(dāng)然應(yīng)該是內(nèi)聯(lián)樣式；

---

2、.son 都用了偽元素，核心樣式設(shè)置了 height:0、width:100%、display:inline-block; 這是用偽元素多撐一行，因?yàn)?text-align:justify 對(duì)最后一行沒(méi)用；display 不能為 block，否則無(wú)效，因?yàn)?text-align 是針對(duì)文本內(nèi)容的，對(duì)于塊級(jí)元素自然無(wú)效，但是設(shè)置 inline 又無(wú)法設(shè)置寬高多占一行，所以只能 inline-block;

---

3、text-align:justify 加在父元素上

---

后面是針對(duì) IE8 ，正常可以忽略不用看了。

不幸的是，IE8 不行，或者 IE 都不行，要兼容 IE 也不是不行，方法倒是想出來(lái)了，不過(guò)你肯定不會(huì)用來(lái)給文字做這樣的排版，效果圖：

CSS:

* {margin:0;padding:0; } .par {width: 170px;overflow: hidden;border: 1px solid grey; text-align:justify;padding:10px; } .son { font-size: 15px; display: inline-block; } .justify {height: 0;width: 100%;display: inline-block; }

HTML:

<div class="par"> <span class="son">上</span><span class="son">海</span> <span class="justify"></span><span class="son">上</span><span class="son">海</span><span class="son">活</span><span class="son">動(dòng)</span> <span class="justify"></span><span class="son">內(nèi)</span> <span class="son">蒙</span> <span class="son">古</span> <span class="son">活</span> <span class="son">動(dòng)</span> <span class="son">上</span> <span class="justify"></span> </div>

我知道你被這樣的代碼嚇到了，，，我也是，，，但是換成照片兩端對(duì)齊就會(huì)很好用，效果圖(左邊 chrome ,右邊 IE8)：

代碼是這樣的：

CSS:

* {margin:0;padding:0; } .par {width: 170px;overflow: hidden;border: 1px solid grey; text-align:justify;padding:10px; } .son { font-size: 15px; display: inline-block; } .justify {height: 0;width: 100%;display: inline-block; } img {width: 30px;height: 30px; }

HTML:

<div class="par"><span class="son"><img src="images/google.png" alt="" /></span><span class="son"><img src="images/google.png" alt="" /></span> <span class="justify"></span><span class="son"><img src="images/google.png" alt="" /></span><span class="son"><img src="images/google.png" alt="" /></span><span class="son"><img src="images/google.png" alt="" /></span> <span class="justify"></span><span class="son"><img src="images/google.png" alt="" /></span><span class="son"><img src="images/google.png" alt="" /></span><span class="son"><img src="images/google.png" alt="" /></span><span class="son"><img src="images/google.png" alt="" /></span><span class="son"><img src="images/google.png" alt="" /></span> <span class="justify"></span> </div>

這種用法咱們總結(jié)下：

---

1、兩端對(duì)齊的元素要是一個(gè)個(gè) inline-block 元素，所以圖片可以直接放，文字就要被迫拆開(kāi)了

---

2、需要換行的，用 span.justify 換，樣式還和之前一樣，空占一行，這樣同一行的會(huì)自動(dòng)兩端對(duì)齊

---

3、其他和前面一樣，但是有一點(diǎn)要注意， span 元素間必須有間隔，譬如正常換行是可以的、有空格也是可以的，如果連在一起就沒(méi)有效果

---

舉例：

代碼：

參考文章，推薦：(第一篇講的很細(xì)致)

從css text-align:justify談?wù)則ext-align文本對(duì)齊方式
text-jusyify下的inline-block自適應(yīng)列表布局末行對(duì)齊修復(fù)實(shí)例頁(yè)面

行文倉(cāng)促,如有錯(cuò)誤,歡迎批評(píng)指正~~~

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

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

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

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