關於這個樣式屬性justify

關於css屬性text-align:justify：

先用一句話來理解：只有在存在第二行的情況下，第一行才兩端對齊。

今天這篇文章要說什麼了？當然，如果僅僅是用一個例子，設定個兩行文本，然後證明一下上面這句話的真理性，那就太無聊了。

今天這篇文章，來聊一下，如果是一行的情況下，我們是如何讓它兩端對齊的。

一、看個現象，同時也驗證一下定義的真實性

代碼如下：

效果圖如下：

GIF/312K

如上面這張效果圖所示：當不存在第二行的情況下（圖中改變div.container的寬高來模擬），只對div.justify設置text-align:justify，子元素無法實現兩端對齊。這就證明了justify屬性的定義真實性。下面我們來看一下如讓一行的情況下實現兩端對齊。

二、第一種不太好的實現方法

為了解決這個問題，我找到了一個樣式屬性text-align-last，這個屬性規定如何對齊文本的最後一行，並且text-align-last屬性只有在text-align屬性設置為justify時才起作用。來試一把

結果，效果真的和想像的一樣：

既然，這個屬性可以解決問題，出於職業性的反應，它的兼容性如何了，如下圖

慘不忍睹，text-align-last的兼容性不理想，沒法達到實用的目的。往下看。

三、最常用的實現方法

從定義出去，來尋求更好的解決方法。既然是存在第二行情況下，第一行才兩端對齊，那製造一個假的第二行就行了。使用偽元素在適合不過了。

結果和想像的一樣。

總結：

通過給偽元素:after設置inline-block，設置寬度100%，配合容器的text-align:justify，就可以輕鬆實現多列均勻布局了。重要的還是記住它的定義。

點擊展開全文

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！