text-align: justify：

　　大家都知道 text-align 屬性是規定元素中的文本的水平對齊方式，最常用的值是left、right、center，那么justify是什么呢？

?

　　在W3C上是這樣介紹的：

　　　　justify 可以使文本的兩端都對齊在兩端對齊文本中，文本行的左右兩端都放在父元素的內邊界上。然后，調整單詞和字母間的間隔，使各行的長度恰好相等

?

　　這段話有點拗口，為了直觀點體現出它的特點，所以直接上碼上圖：

?

<p style="width:400px;text-align:left;;margin:20px auto;"><strong style="color:#000;margin-bottom:10px;">text-align: left:</strong></br></br>Nettie Maria Stevens was an early American geneticist. In 1905, she and Edmund Beecher Wilson were the first researchers to independently describe the chromosomal basis of sexNettie在海岸邊，退潮時你可徒步走到一些島嶼近處，在潮間帶里看見諸如海星、海膽、海帶等海洋生物，體驗甜蜜的幸福感。或是在天氣好時，肩并肩坐在海灘上等待日落晚霞，浪漫滿溢。</br></br>浪漫滿溢
</p><p style="width: 400px;text-align: justify;margin:20px auto;"><strong style="color:#000;margin-bottom:10px;">text-align: justify:</strong></br></br>Nettie Maria Stevens was an early American geneticist. In 1905, she and Edmund Beecher Wilson were the first researchers to independently describe the chromosomal basis of sexNettie在海岸邊，退潮時你可徒步走到一些島嶼近處，在潮間帶里看見諸如海星、海膽、海帶等海洋生物，體驗甜蜜的幸福感。或是在天氣好時，肩并肩坐在海灘上等待日落晚霞，浪漫滿溢。</br></br>浪漫滿溢
</p>

?

?

上面的代碼很簡單，第一個是字體左對齊，另一個是兩端對齊，出來的效果是這樣的：

?

?

?

兩種方法放一塊比較就可以看出使用了 text-align: justify 文字的兩端是對齊的。

?

但是仔細觀察一下，發現為了兩端對齊，有些文字的間距就被拉開了（第二行的英文）。有時候間隔隔得太大會造成閱讀困難，所以如果有需要的情況下用letter-spacing收縮字符間距就可以了。

?

另外，?text-align-last:right 可以改變段落的最后一行的對齊方式。但是只有在 text-align 屬性設置為 "justify" 時才起作用

?

如果這個方法排版會是怎樣的呢？

<ul class="justify_list"><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
</ul>

.justify_list{text-align: justify;text-justify:distribute-all-lines;width: 600px;}

li{width:100px;    height:100px;background-color: #0086b3;    display: inline-block; list-style:none; }

?

效果如下：

?

這時候發現，被擠下來的部分并沒有左右兩端對齊。

?

經過查詢才知道原來是text-align:justify 不處理塊內的最后一行文本（包括塊內僅有一行文本的情況，這時既是第一行也是最后一行）

?

既然如此，解決方法就簡單了：

.justify_list:after {width: 100%;height: 0;margin: 0;display: inline-block;overflow: hidden;content: '';}

?

效果如下：

?

?

總體來說實現得還不錯。在排版的時候不需要計算每個列表元素間的margin間距，比用float的時候省事很多。

總結

以上是生活随笔為你收集整理的css3总结之： text-align: justify （两端对齐）的全部內容，希望文章能夠幫你解決所遇到的問題。

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