两端对齐 justify 测试兼容火狐谷歌Safari 安卓IOS
feilong.org 修订于2018-10-12 09:59:51两端对齐 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 对非最后一行起作用。此法最佳！但是，会多一行高度！
如何设置文本两端对齐呢？
如何设置文本两端对齐呢？
如何设置文本两端对齐呢？对齐呢对齐呢对齐呢对齐呢对齐呢对呢
how to justify words
how to justify words
how to justify wordswords
方法二： text-align:justify 和 text-align-last:justify; 结合起来用。但是Safari不支持 text-align-last. 此法不适合IOS！
how to justify words
how to justify words
how to justify wordswords
如何设置文本两端对齐呢？
如何设置文本两端对齐呢？
如何设置文本两端对齐呢？对齐呢对齐呢
how to justify words
how to justify words
how to justify wordswords
如何设置文本两端对齐呢？
如何设置文本两端对齐呢？
如何设置文本两端对齐呢？对齐呢？对齐呢
更新网址：https://feilong.org/text-align-last-justify-safari-ios-chrome-ie
最初发布：20181012 09:59:51 feilong.org 于广州
加入收藏夹，查看更方便。
所在分类： 前端开发