今天我們來聊一聊CSS文本兩端對齊。
事情的起因是這樣的，在Review一位同事做的頁面時，發(fā)現(xiàn)好幾處字符之間寫了很多空格，于是問他為什么這么做，他說設計要求這幾個文本的呈現(xiàn)寬度必須一致，但它們的字符個數(shù)又不同，所以就在字符數(shù)少的文本中添加空格從而達到文本兩端對齊（字符均勻分布）的效果，于是我對他表示了侮辱性的贊美。
用添加空格符的方式實現(xiàn)文本兩端對齊，除了不夠優(yōu)雅，容易被羞辱之外，還有其他三個問題：
1. 不同的瀏覽器，不同的移動設備，對空格符的展示寬度是有細微差別的，一個空格看不出影響，但是多個空格就無法保證一致了，很有可能出現(xiàn)沒對齊或者折行的情況。
2. 任何頁面都避免不了修改，如果文本需要更換，并且更換后字數(shù)發(fā)生變化，這將意味著之前的空格數(shù)量需要重新調整，非常不利于維護。
3. 某些頁面上的文本，用戶可能會去復制，但復制下來后發(fā)現(xiàn)含有很多空格符，仍需要二次編輯。
因此在日常開發(fā)中要避免使用空格符來實現(xiàn)兩端對齊，而應該使用標準的CSS文本對齊屬性來解決。
CSS文本對齊屬性 text-align
這個屬性大家經(jīng)常用到的值有三個：
left：左對齊
right：右對齊
center：居中對齊
它還有一個屬性值：justify，表示文本兩端對齊，也就是讓文本在固定寬度內平均分布，使兩邊不會出現(xiàn)空白。那么用這個屬性是否就能很好的實現(xiàn)文本兩端對齊呢？
通過測試發(fā)現(xiàn)，單行文本通過text-align:justify; 并不能實現(xiàn)兩端對齊，為什么會出現(xiàn)這個情況？我們需要先了解一點點排版知識。
傳統(tǒng)書刊的排版印刷對于整個自然段通常采用兩端對齊的方式，這樣就保證了排版的美觀和良好的閱讀體驗。但是自然段的最后一行文字是左對齊的，因為最后一行文本意味著段落的結束，沒有必要繼續(xù)兩端對齊了。
細心的朋友應該已經(jīng)猜到了，在我們測試中，文本只有一行，意味著它也是最后一行，而CSS的文本對齊方式也遵循最后一行文本默認左對齊的原則，因此不能實現(xiàn)兩端對齊。
好在CSS為我們提供了另外一個屬性：text-align-last，這個屬性用來額外設置段落最后一行文本的對齊方式，因此對于單行文本，我們只需要設置：text-align-last: justify;就可以了，親測有效。
TIPS：單行文本要想實現(xiàn)文本兩端對齊，除了上面說的方式，一定別忘了這個文本需要一個確定的寬度，不設置寬度，文本也就不存在兩端。因此這個單行文本不能是行內布局，而應該是塊級或者是行內塊級布局。
好景不長，用上面的方式實現(xiàn)了文本兩端對齊后，發(fā)現(xiàn)它只是在PC上有效，但是在IOS的系統(tǒng)瀏覽器里毫無效果，最后發(fā)現(xiàn)在IOS上不支持text-align-last這個屬性，因此這個方式并不穩(wěn)妥。
那么如何解決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;}
第一次純手機手戳，有誤或者不完善之處敬請諒解，歡迎評論指出。
[ 轉載請注明出處，禁止用于盈利 ]
我的其他文章
