今天我們來聊一聊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
這個屬性大家經常用到的值有三個：
left：左對齊
right：右對齊
center：居中對齊
它還有一個屬性值：justify讼积，表示文本兩端對齊肥照，也就是讓文本在固定寬度內平均分布，使兩邊不會出現(xiàn)空白勤众。那么用這個屬性是否就能很好的實現(xiàn)文本兩端對齊呢舆绎？
通過測試發(fā)現(xiàn)，單行文本通過text-align:justify; 并不能實現(xiàn)兩端對齊们颜，為什么會出現(xiàn)這個情況吕朵？我們需要先了解一點點排版知識。
傳統(tǒng)書刊的排版印刷對于整個自然段通常采用兩端對齊的方式窥突，這樣就保證了排版的美觀和良好的閱讀體驗努溃。但是自然段的最后一行文字是左對齊的，因為最后一行文本意味著段落的結束阻问，沒有必要繼續(xù)兩端對齊了梧税。
細心的朋友應該已經猜到了，在我們測試中，文本只有一行第队，意味著它也是最后一行哮塞，而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;}
第一次純手機手戳噩峦，有誤或者不完善之處敬請諒解，歡迎評論指出抽兆。
[ 轉載請注明出處识补，禁止用于盈利 ]
我的其他文章
