天我們來聊一聊CSS文本兩端對齊。
事情的起因是這樣的,在Review一位同事做的頁面時,發現好幾處字符之間寫了很多空格,于是問他為什么這么做,他說設計要求這幾個文本的呈現寬度必須一致,但它們的字符個數又不同,所以就在字符數少的文本中添加空格從而達到文本兩端對齊(字符均勻分布)的效果,于是我對他表示了侮辱性的贊美。
用添加空格符的方式實現文本兩端對齊,除了不夠優雅,容易被羞辱之外,還有其他三個問題:
1. 不同的瀏覽器,不同的移動設備,對空格符的展示寬度是有細微差別的,一個空格看不出影響,但是多個空格就無法保證一致了,很有可能出現沒對齊或者折行的情況。
2. 任何頁面都避免不了修改,如果文本需要更換,并且更換后字數發生變化,這將意味著之前的空格數量需要重新調整,非常不利于維護。
3. 某些頁面上的文本,用戶可能會去復制,但復制下來后發現含有很多空格符,仍需要二次編輯。
因此在日常開發中要避免使用空格符來實現兩端對齊,而應該使用標準的CSS文本對齊屬性來解決。
這個屬性大家經常用到的值有三個:
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;}
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用來創建一個偽元素添加一行內容并且將其隱藏。這樣要顯示的內容就不是最后一行了,這次閥就會生效再次回到瀏覽器刷新成功。
好了,今天的分享就到這里,所有的案例及相關文檔均可向我獲取,我們下期見。
想學編程,點點關注。
出里文字比較多的網頁,文字對齊其中采用的兩端對齊,兩端對齊的方法有三種方法,如下:
1. 使用text-align:justify
text-align:justify 屬性是全兼容的,使用它實現兩端對齊,需要注意在模塊之間添加[空格/換行符/制表符]才能起作用,同樣,實現文本對齊也是需要在字與字之間添加[空格/換行符/制表符]才能起作用
/*
說明:
1.IE中要實現塊內單行兩端對齊需要使用其私有屬性text-align-last:justify配合,text-align-last 要生效,必須先定義text-align 為justify
2.line-height:0 解決標準瀏覽器容器底部多余的空白
*/
.content{
text-align:justify;
text-align-last:justify;
line-height:0;
height:44px;
}
/*
說明:
模塊使用[換行符]或[空格符]后,webkit瀏覽器中會引起最后一個模塊有多余空白,使用font-size:0可清除該空格
*/
@media all and (-webkit-min-device-pixel-ratio:0){
.content{
font-size:0;
}
}
/*
說明:
1.text-align-last:justify 目前只有IE支持,標準瀏覽器需要使用 .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定義了對象的列數
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元素
文/丁向明
做一個有博客的web前端自媒體人,專注web前端開發,關注用戶體驗,加我qq/微信交流:6135833
http://dingxiangming.com
*請認真填寫需求信息,我們會在24小時內與您取得聯系。