整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
天我們來聊一聊CSS文本兩端對齊。
事情的起因是這樣的，在Review一位同事做的頁面時(shí)，發(fā)現(xiàn)好幾處字符之間寫了很多空格，于是問他為什么這么做，他說設(shè)計(jì)要求這幾個(gè)文本的呈現(xiàn)寬度必須一致，但它們的字符個(gè)數(shù)又不同，所以就在字符數(shù)少的文本中添加空格從而達(dá)到文本兩端對齊（字符均勻分布）的效果，于是我對他表示了侮辱性的贊美。
用添加空格符的方式實(shí)現(xiàn)文本兩端對齊，除了不夠優(yōu)雅，容易被羞辱之外，還有其他三個(gè)問題：
1. 不同的瀏覽器，不同的移動設(shè)備，對空格符的展示寬度是有細(xì)微差別的，一個(gè)空格看不出影響，但是多個(gè)空格就無法保證一致了，很有可能出現(xiàn)沒對齊或者折行的情況。
2. 任何頁面都避免不了修改，如果文本需要更換，并且更換后字?jǐn)?shù)發(fā)生變化，這將意味著之前的空格數(shù)量需要重新調(diào)整，非常不利于維護(hù)。
3. 某些頁面上的文本，用戶可能會去復(fù)制，但復(fù)制下來后發(fā)現(xiàn)含有很多空格符，仍需要二次編輯。
因此在日常開發(fā)中要避免使用空格符來實(shí)現(xiàn)兩端對齊，而應(yīng)該使用標(biāo)準(zhǔn)的CSS文本對齊屬性來解決。
這個(gè)屬性大家經(jīng)常用到的值有三個(gè)：
left：左對齊
right：右對齊
center：居中對齊
它還有一個(gè)屬性值：justify，表示文本兩端對齊，也就是讓文本在固定寬度內(nèi)平均分布，使兩邊不會出現(xiàn)空白。那么用這個(gè)屬性是否就能很好的實(shí)現(xiàn)文本兩端對齊呢？
通過測試發(fā)現(xiàn)，單行文本通過text-align:justify; 并不能實(shí)現(xiàn)兩端對齊，為什么會出現(xiàn)這個(gè)情況？我們需要先了解一點(diǎn)點(diǎn)排版知識。
傳統(tǒng)書刊的排版印刷對于整個(gè)自然段通常采用兩端對齊的方式，這樣就保證了排版的美觀和良好的閱讀體驗(yàn)。但是自然段的最后一行文字是左對齊的，因?yàn)樽詈笠恍形谋疽馕吨温涞慕Y(jié)束，沒有必要繼續(xù)兩端對齊了。
細(xì)心的朋友應(yīng)該已經(jīng)猜到了，在我們測試中，文本只有一行，意味著它也是最后一行，而CSS的文本對齊方式也遵循最后一行文本默認(rèn)左對齊的原則，因此不能實(shí)現(xiàn)兩端對齊。
好在CSS為我們提供了另外一個(gè)屬性：text-align-last，這個(gè)屬性用來額外設(shè)置段落最后一行文本的對齊方式，因此對于單行文本，我們只需要設(shè)置：text-align-last: justify;就可以了，親測有效。
TIPS：單行文本要想實(shí)現(xiàn)文本兩端對齊，除了上面說的方式，一定別忘了這個(gè)文本需要一個(gè)確定的寬度，不設(shè)置寬度，文本也就不存在兩端。因此這個(gè)單行文本不能是行內(nèi)布局，而應(yīng)該是塊級或者是行內(nèi)塊級布局。
好景不長，用上面的方式實(shí)現(xiàn)了文本兩端對齊后，發(fā)現(xiàn)它只是在PC上有效，但是在IOS的系統(tǒng)瀏覽器里毫無效果，最后發(fā)現(xiàn)在IOS上不支持text-align-last這個(gè)屬性，因此這個(gè)方式并不穩(wěn)妥。
那么如何解決IOS的兼容問題呢？
著手點(diǎn)只有一個(gè)，那就是如何保證單行文本對于CSS來說并不是最后一行？這句話看似很奇怪，其實(shí)解決辦法很簡單，只需要給這個(gè)單行文本添加一個(gè)偽元素after即可。
someClass: after { content: “”}
由于添加了偽元素，單行文本不再是最后一行，偽元素才是， 同時(shí)偽元素的內(nèi)容為空字符串，并不會對顯示造成影響，因此完美解決了這個(gè)問題。
注意：偽元素after不僅要設(shè)置content，還要添加 width:100%; 和 display:inline-block; 這是因?yàn)椋喝绻辉O(shè)置寬度，偽元素內(nèi)容并不會成為第二行，如果display設(shè)置成block，又造成了偽元素變成了另一個(gè)塊級元素，所以要設(shè)置為inline-block。
最終的代碼：
someClass {text-align:justify; width:300px;}
someClass: after { content: “”; width:100%; display:inline-block;}
SS之文本對齊。
免費(fèi)少兒編程開課了，同學(xué)們好！今天分享的知識是設(shè)置文本在區(qū)域中水平方向的對齊方式。用到的是 css 的 text 的align屬性，這個(gè)屬性的常用值有類似，左對齊，right 右對齊，center 居中對齊。
Justify兩端對齊需要注意的是 text line和德瑞權(quán)文本方向有關(guān)系。如果德瑞權(quán)屬性是 l tr則默認(rèn)值為列；如果德瑞權(quán)屬性是 rtl則默認(rèn)值為 right。左中右對齊都很簡單，一目了然。
但我們會注意到兩端對齊這一行并沒有達(dá)成我們想要的效果，所謂的兩端對齊就是文本的第一個(gè)字對齊區(qū)域的左邊界，文本的最后一個(gè)字對齊右邊界，中間的文本平均分布在區(qū)域內(nèi)。看看代碼，確實(shí)設(shè)置了 text line 為這四個(gè)方案。
沒有效果的原因是這個(gè)屬性對最后一行不生效，解決方案是使用 text line last屬性，先看看效果，ok，這就是兩端對齊。現(xiàn)階段學(xué)習(xí)到這里就可以了，但我需要提醒各位同學(xué)，text line last的兼容性是有問題的，特別是在蘋果的 ios 系統(tǒng)中spare 不支持這個(gè)屬性，這會導(dǎo)致安卓手機(jī)中顯示正常，但蘋果手機(jī)卻顯示錯(cuò)誤。
為了解決這個(gè)問題，只需要讓文本不是最后一行即可。看這段代碼，v到了前面講過的偽元素 after，在這里在文本后插入了一個(gè)內(nèi)容，寬度是百分之一百，顯示方式是內(nèi)塊，超出部分隱藏并設(shè)置了高為零。
我用 after用來創(chuàng)建一個(gè)偽元素添加一行內(nèi)容并且將其隱藏。這樣要顯示的內(nèi)容就不是最后一行了，這次閥就會生效再次回到瀏覽器刷新成功。
好了，今天的分享就到這里，所有的案例及相關(guān)文檔均可向我獲取，我們下期見。
想學(xué)編程，點(diǎn)點(diǎn)關(guān)注。
出里文字比較多的網(wǎng)頁，文字對齊其中采用的兩端對齊，兩端對齊的方法有三種方法，如下：
1. 使用text-align:justify
text-align:justify 屬性是全兼容的，使用它實(shí)現(xiàn)兩端對齊，需要注意在模塊之間添加[空格/換行符/制表符]才能起作用，同樣，實(shí)現(xiàn)文本對齊也是需要在字與字之間添加[空格/換行符/制表符]才能起作用
/*
說明：
1.IE中要實(shí)現(xiàn)塊內(nèi)單行兩端對齊需要使用其私有屬性text-align-last:justify配合，text-align-last 要生效，必須先定義text-align 為justify
2.line-height:0 解決標(biāo)準(zhǔn)瀏覽器容器底部多余的空白
*/
.content{
text-align:justify;
text-align-last:justify;
line-height:0;
height:44px;
}
/*
說明：
模塊使用[換行符]或[空格符]后，webkit瀏覽器中會引起最后一個(gè)模塊有多余空白，使用font-size:0可清除該空格
*/
@media all and (-webkit-min-device-pixel-ratio:0){
.content{
font-size:0;
}
}
/*
說明：
1.text-align-last:justify 目前只有IE支持，標(biāo)準(zhǔn)瀏覽器需要使用 .demo:after 偽類模擬類似效果
2.opera瀏覽器需要添加 vertical-align:top 才能完全解決底部多余的空白
*/
.content:after{
display:inline-block;
overflow:hidden;
width:100%;
height:0;
content:'';
vertical-align:top;
}
且子類必須是inline-block元素
-------------------------------------------------------------------------------
2. 使用box-pack:justify
父類容器css:
.content{
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
-webkit-box-pack:justify;
-webkit-justify-content:space-between;
-ms-flex-pack:justify;
justify-content:space-between;
}
且子類必須是block元素
-------------------------------------------------------------------------------
3. 使用column(多列布局)
/*
說明：
1.column-count定義了對象的列數(shù)
2.column-gap定義了對象中列與列的間距
*/
父類容器css:
.content {
-webkit-column-count: 2;
-moz-column-count: 4;
column-count: 4;
-webkit-column-gap: 20px;
-moz-column-gap: 20px;
column-gap: 20px;
}
且子類必須是block元素
文/丁向明
做一個(gè)有博客的web前端自媒體人，專注web前端開發(fā)，關(guān)注用戶體驗(yàn)，加我qq/微信交流：6135833
http://dingxiangming.com
*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。
