飞龙博客

妙法莲华经

两端对齐 justify 测试兼容火狐谷歌Safari 安卓IOS

feilong.org 修订于2018-10-12 10:01:17

两端对齐 justify 测试兼容火狐谷歌Safari 安卓IOS。

两端对齐 justify
此例子 飞龙进行全面深入测试 如果让 文字左右两端对齐。特别是兼容ios或safari浏览器,该怎么办的解决方案。

text-align:justify; 不处理块内的最后一行文本。 包括块内仅有一行文本,既是第一行也是最后一行。

注意:text-justify 主要针对 IE浏览器中的汉字 进行处理!必须和text-align:justify一起使用才有效。

汉字最好是用加空格打散,才能保证在 Safari 里 也能 完完全全的两端对齐!

.taj{text-align:justify;text-justify:inter-ideograph;overflow:hidden;}
.taj:after{content:'';display:inline-block;width:100%;} 
 
.taf{text-align:justify;text-align-last:justify;text-justify:distribute-all-lines;}
.taf2{text-align:justify;text-align-last:justify;text-justify:inter-ideograph;}
 
.box{ margin-top:30px;width:300px;background-color:#eee;}

方法一:伪元素加一行,让 text-align:justify 对非最后一行起作用。此法最佳!但是,会多一行高度!

<div class="taj box" id="ddd">
如何设置文本两端对齐呢?
如何设置文本两端对齐呢?
如何设置文本两端对齐呢?对齐呢对齐呢对齐呢对齐呢对齐呢对呢
</div>
 
<div class="taj box">
how to justify words
how to justify words
how to justify wordswords
</div>

方法二: text-align:justify 和 text-align-last:justify; 结合起来用。但是Safari不支持 text-align-last. 此法不适合IOS!

<div class="taf box">
how to justify words
how to justify words
how to justify wordswords
</div>
 
<div class="taf box">
如何设置文本两端对齐呢?
如何设置文本两端对齐呢?
如何设置文本两端对齐呢?对齐呢对齐呢
</div>
 
 
 
<div class="taf2 box">
how to justify words
how to justify words
how to justify wordswords
</div>
 
<div class="taf2 box" id="eee">
如何设置文本两端对齐呢?
如何设置文本两端对齐呢?
如何设置文本两端对齐呢?对齐呢?对齐呢
</div>

更新网址:http://feilong.org/text-align-last-justify-safari-ios-chrome-ie
最初发布:20181012 09:59:51 feilong.org 于广州

加入收藏夹,查看更方便。

所在分类: 前端开发

旧文:

飞龙前端QQ群