text-align:justify 實現兩端對齊文本的效果

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

爲了兩端對齊，有些文字的間距就被拉開了。有時候間隔隔得太大會造成閱讀困難，所以如果有需要的情況下用letter-spacing收縮字符間距就可以了。

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

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

html代碼：

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

CSS樣式：

.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的時候省事很多。