SS之文本對齊。

免費少兒編程開課了，同學們好！今天分享的知識是設置文本在區域中水平方向的對齊方式。用到的是 css 的 text 的align屬性，這個屬性的常用值有類似，左對齊，right 右對齊，center 居中對齊。

Justify兩端對齊需要注意的是 text line和德瑞權文本方向有關系。如果德瑞權屬性是 l tr則默認值為列；如果德瑞權屬性是 rtl則默認值為 right。左中右對齊都很簡單，一目了然。

但我們會注意到兩端對齊這一行并沒有達成我們想要的效果，所謂的兩端對齊就是文本的第一個字對齊區域的左邊界，文本的最后一個字對齊右邊界，中間的文本平均分布在區域內。看看代碼，確實設置了 text line 為這四個方案。

沒有效果的原因是這個屬性對最后一行不生效，解決方案是使用 text line last屬性，先看看效果，ok，這就是兩端對齊。現階段學習到這里就可以了，但我需要提醒各位同學，text line last的兼容性是有問題的，特別是在蘋果的 ios 系統中spare 不支持這個屬性，這會導致安卓手機中顯示正常，但蘋果手機卻顯示錯誤。

為了解決這個問題，只需要讓文本不是最后一行即可。看這段代碼，v到了前面講過的偽元素 after，在這里在文本后插入了一個內容，寬度是百分之一百，顯示方式是內塊，超出部分隱藏并設置了高為零。

我用 after用來創建一個偽元素添加一行內容并且將其隱藏。這樣要顯示的內容就不是最后一行了，這次閥就會生效再次回到瀏覽器刷新成功。

好了，今天的分享就到這里，所有的案例及相關文檔均可向我獲取，我們下期見。

想學編程，點點關注。

天我們來聊一聊CSS文本兩端對齊。

事情的起因是這樣的，在Review一位同事做的頁面時，發現好幾處字符之間寫了很多空格，于是問他為什么這么做，他說設計要求這幾個文本的呈現寬度必須一致，但它們的字符個數又不同，所以就在字符數少的文本中添加空格從而達到文本兩端對齊（字符均勻分布）的效果，于是我對他表示了侮辱性的贊美。

用添加空格符的方式實現文本兩端對齊，除了不夠優雅，容易被羞辱之外，還有其他三個問題：

1. 不同的瀏覽器，不同的移動設備，對空格符的展示寬度是有細微差別的，一個空格看不出影響，但是多個空格就無法保證一致了，很有可能出現沒對齊或者折行的情況。

2. 任何頁面都避免不了修改，如果文本需要更換，并且更換后字數發生變化，這將意味著之前的空格數量需要重新調整，非常不利于維護。

3. 某些頁面上的文本，用戶可能會去復制，但復制下來后發現含有很多空格符，仍需要二次編輯。

因此在日常開發中要避免使用空格符來實現兩端對齊，而應該使用標準的CSS文本對齊屬性來解決。

CSS文本對齊屬性 text-align

這個屬性大家經常用到的值有三個：

left：左對齊

right：右對齊

center：居中對齊

它還有一個屬性值：justify，表示文本兩端對齊，也就是讓文本在固定寬度內平均分布，使兩邊不會出現空白。那么用這個屬性是否就能很好的實現文本兩端對齊呢？

通過測試發現，單行文本通過text-align:justify; 并不能實現兩端對齊，為什么會出現這個情況？我們需要先了解一點點排版知識。

傳統書刊的排版印刷對于整個自然段通常采用兩端對齊的方式，這樣就保證了排版的美觀和良好的閱讀體驗。但是自然段的最后一行文字是左對齊的，因為最后一行文本意味著段落的結束，沒有必要繼續兩端對齊了。

細心的朋友應該已經猜到了，在我們測試中，文本只有一行，意味著它也是最后一行，而CSS的文本對齊方式也遵循最后一行文本默認左對齊的原則，因此不能實現兩端對齊。

好在CSS為我們提供了另外一個屬性：text-align-last，這個屬性用來額外設置段落最后一行文本的對齊方式，因此對于單行文本，我們只需要設置：text-align-last: justify;就可以了，親測有效。

TIPS：單行文本要想實現文本兩端對齊，除了上面說的方式，一定別忘了這個文本需要一個確定的寬度，不設置寬度，文本也就不存在兩端。因此這個單行文本不能是行內布局，而應該是塊級或者是行內塊級布局。

好景不長，用上面的方式實現了文本兩端對齊后，發現它只是在PC上有效，但是在IOS的系統瀏覽器里毫無效果，最后發現在IOS上不支持text-align-last這個屬性，因此這個方式并不穩妥。

那么如何解決IOS的兼容問題呢？

著手點只有一個，那就是如何保證單行文本對于CSS來說并不是最后一行？這句話看似很奇怪，其實解決辦法很簡單，只需要給這個單行文本添加一個偽元素after即可。

someClass: after { content: “”}

由于添加了偽元素，單行文本不再是最后一行，偽元素才是， 同時偽元素的內容為空字符串，并不會對顯示造成影響，因此完美解決了這個問題。

注意：偽元素after不僅要設置content，還要添加 width:100%; 和 display:inline-block; 這是因為：如果不設置寬度，偽元素內容并不會成為第二行，如果display設置成block，又造成了偽元素變成了另一個塊級元素，所以要設置為inline-block。

最終的代碼：

someClass {text-align:justify; width:300px;}

someClass: after { content: “”; width:100%; display:inline-block;}