使用text-align:justify實(shí)現(xiàn)兩端對齊一例
更新時(shí)間:2007年09月23日 19:25:35 作者:
text-align:justify只能對多行中的非最后一行進(jìn)行兩端對齊。對于單行自己沒辦法,IE有text-justify 可以解決問題,對了非IE的我的方式比較垃圾,因?yàn)橹辉谔厥鈭龊舷虏艜?huì)用。
Example Source Code [www.52css.com]
.justify{
height:1.1em;
overflow:hidden;
text-align:justify;
text-justify :distribute-all-lines;
}
div.cn:after {
content: "__________________________________________";
font-size:100px;
}
對了非IE的我是使用content還增加內(nèi)容達(dá)到有第二行,才會(huì)在第一行兩端對齊。
不過各瀏覽器對中文的理解不一樣。Firefox 是直接分割中文,Opera不會(huì)分割中文,只認(rèn)空格,要是在中文中間插點(diǎn)半角的英文或者標(biāo)號它還會(huì)對不齊,safari接近Opera。都是不加空格沒法分。
英文比較好,因?yàn)榇蠹抑荒苡每崭穹謥韱卧~,不過IE用text-justify :distribute-all-lines來分真是難看得要命。本來想過用htc或者js幫IE,可是發(fā)現(xiàn),IE6好笨的說,家里沒IE7不知道怎樣。
或者敲空格是一種比較好的方式,可firefox這種只放大文本的瀏覽器一放大文字就XX了,我寫的那個(gè)爛方法也只有在一定的情況下有用,想起一句話:珍惜生命,遠(yuǎn)離Firefix!
Example Source Code [www.52css.com]
.justify{
height:1.1em;
overflow:hidden;
text-align:justify;
text-justify :distribute-all-lines;
}
div.cn:after {
content: "__________________________________________";
font-size:100px;
}
對了非IE的我是使用content還增加內(nèi)容達(dá)到有第二行,才會(huì)在第一行兩端對齊。
不過各瀏覽器對中文的理解不一樣。Firefox 是直接分割中文,Opera不會(huì)分割中文,只認(rèn)空格,要是在中文中間插點(diǎn)半角的英文或者標(biāo)號它還會(huì)對不齊,safari接近Opera。都是不加空格沒法分。
英文比較好,因?yàn)榇蠹抑荒苡每崭穹謥韱卧~,不過IE用text-justify :distribute-all-lines來分真是難看得要命。本來想過用htc或者js幫IE,可是發(fā)現(xiàn),IE6好笨的說,家里沒IE7不知道怎樣。
或者敲空格是一種比較好的方式,可firefox這種只放大文本的瀏覽器一放大文字就XX了,我寫的那個(gè)爛方法也只有在一定的情況下有用,想起一句話:珍惜生命,遠(yuǎn)離Firefix!
相關(guān)文章
網(wǎng)頁設(shè)計(jì)者需要了解的_網(wǎng)頁字體大小數(shù)據(jù)參考
對于頁面來說,字體的大小設(shè)置是比較重要的,網(wǎng)上搜集了一些關(guān)于網(wǎng)頁中字體大小的數(shù)據(jù)對比,在這共享出來給大家一起看看,希望對大家在頁面制作過程中有所幫助!2008-10-10發(fā)現(xiàn)四種在網(wǎng)頁中使用CSS樣式表的方法
發(fā)現(xiàn)四種在網(wǎng)頁中使用CSS樣式表的方法...2007-09-09非常不錯(cuò)的關(guān)于IE與FireFox的js和css幾處不同點(diǎn)[轉(zhuǎn)自星火燎原]
非常不錯(cuò)的關(guān)于IE與FireFox的js和css幾處不同點(diǎn)[轉(zhuǎn)自星火燎原]...2007-09-09css創(chuàng)意ul+li實(shí)現(xiàn)的細(xì)線表格實(shí)現(xiàn)代碼
非常用創(chuàng)意的用ul+li實(shí)現(xiàn)的細(xì)線表格效果,不用table2008-08-08