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

寫代碼的時候遇到這樣一個設計圖：

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

<div class="par"><span class="son">上海</span><span class="son">上海活動</span><span class="son">內蒙古活動上</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; }

?

注意點：

---

1、需要兩端對齊的元素改成了 span,內聯元素，當然你想用 div 也行，不過得設置 display:inline; 原理應該很好理解，text-align 本來就是針對文字內容樣式的，當然應該是內聯樣式；

---

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

---

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

---

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

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

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">動</span> <span class="justify"></span><span class="son">內</span> <span class="son">蒙</span> <span class="son">古</span> <span class="son">活</span> <span class="son">動</span> <span class="son">上</span> <span class="justify"></span> </div>

我知道你被這樣的代碼嚇到了，，，我也是，，，但是換成照片兩端對齊就會很好用，效果圖(左邊 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>

這種用法咱們總結下：

---

1、兩端對齊的元素要是一個個 inline-block 元素，所以圖片可以直接放，文字就要被迫拆開了

---

2、需要換行的，用 span.justify 換，樣式還和之前一樣，空占一行，這樣同一行的會自動兩端對齊

---

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

---

舉例：

代碼：

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

從css text-align:justify談談text-align文本對齊方式
text-jusyify下的inline-block自適應列表布局末行對齊修復實例頁面

行文倉促,如有錯誤,歡迎批評指正~~~

轉載于:https://www.cnblogs.com/xianshenglu/p/8033547.html

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

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

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