text-align: justify：

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

?

　　在W3C上是這樣介紹的：

　　　　justify 可以使文本的兩端都對(duì)齊在兩端對(duì)齊文本中，文本行的左右兩端都放在父元素的內(nèi)邊界上。然后，調(diào)整單詞和字母間的間隔，使各行的長(zhǎng)度恰好相等

?

　　這段話有點(diǎn)拗口，為了直觀點(diǎn)體現(xiàn)出它的特點(diǎn)，所以直接上碼上圖：

?

<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在海岸邊，退潮時(shí)你可徒步走到一些島嶼近處，在潮間帶里看見諸如海星、海膽、海帶等海洋生物，體驗(yàn)甜蜜的幸福感。或是在天氣好時(shí)，肩并肩坐在海灘上等待日落晚霞，浪漫滿溢。</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在海岸邊，退潮時(shí)你可徒步走到一些島嶼近處，在潮間帶里看見諸如海星、海膽、海帶等海洋生物，體驗(yàn)甜蜜的幸福感。或是在天氣好時(shí)，肩并肩坐在海灘上等待日落晚霞，浪漫滿溢。</br></br>浪漫滿溢
</p>

?

?

上面的代碼很簡(jiǎn)單，第一個(gè)是字體左對(duì)齊，另一個(gè)是兩端對(duì)齊，出來的效果是這樣的：

?

?

?

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

?

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

?

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

?

如果這個(gè)方法排版會(huì)是怎樣的呢？

<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; }

?

效果如下：

?

這時(shí)候發(fā)現(xiàn)，被擠下來的部分并沒有左右兩端對(duì)齊。

?

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

?

既然如此，解決方法就簡(jiǎn)單了：

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

?

效果如下：

?

?

總體來說實(shí)現(xiàn)得還不錯(cuò)。在排版的時(shí)候不需要計(jì)算每個(gè)列表元素間的margin間距，比用float的時(shí)候省事很多。

總結(jié)

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

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