justify两端对齐前端css兼容火狐谷歌Safari安卓IOS解决方案
飞龙更新于 2021-01-23 07:11 加入书签 CTRL+D 有 121 个朋友来过此例子飞龙进行全面深入测试，如何让文字左右两端对齐。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 对 非最后一行 起作用。此法最佳！但是，会多一行高度！
1 2 3 4 5 6 | <div id="test1" class="taj box">如何设置文本两端对齐呢？ 如何设置文本两端对齐呢？ 如何设置文本两端对齐呢？对齐呢对齐呢对齐呢对齐呢对齐呢对呢 </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！
1 2 3 4 | <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 id="eee" class="taf2 box">如何设置文本两端对齐呢？ 如何设置文本两端对齐呢？ 如何设置文本两端对齐呢？对齐呢？对齐呢</div> |
飞龙提示你把代码粘贴到你的html页面，要亲自测试。
维护小站，感谢赞赏。
联系飞龙，请转淘宝。
飞龙初发：
2018-10-12 09:59
本文更新网址：
https://feilong.org/text-align-last-justify-safari-ios-chrome-ie
所在目录： html css 教程