justify两端对齐前端css兼容火狐谷歌Safari安卓IOS解决方案
feilong.org 修订于2021-12-17 06:22:18 1,577 次浏览此例子飞龙进行全面深入测试，如何让文字左右两端对齐。css里面的 justify ，好像很鸡肋。怎么让justify真正起作用？怎么兼容ios或safari浏览器，该怎么处理justify的css属性值？解决方案。
css的 justify 并不处理块内的最后一行文本，
包括不处理块内仅有一行文本的情况(也就是既是第一行也是最后一行)。
飞龙提示：
1、text-justify 主要针对IE浏览器中的汉字。
2、必须和text-align:justify一起使用才有效。
3、汉字最好是用加空格打散，才能保证在 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
如何设置文本两端对齐呢？ 如何设置文本两端对齐呢？ 如何设置文本两端对齐呢？对齐呢？对齐呢
飞龙提示你把代码粘贴到你的html页面，要亲自测试。
更新网址：https://feilong.org/text-align-last-justify-safari-ios-chrome-ie
最初发布：20181012 09:59:51 feilong.org 于广州
加入收藏夹，查看更方便。
所在分类： html css 教程