justify两端对齐解决方案，前端css兼容火狐谷歌Safari安卓IOS (1,722)
此例子飞龙进行全面深入测试，如何让文字左右两端对齐。css里面的 justify ，好像很鸡肋。怎么让justify真正起作用？怎么兼容ios或safari浏览器，该怎么处理justify的css属性值？解决方案。
css的 justify 并不处理块内的最后一行文本，
包括不处理块内仅有一行文本的情况(也就是既是第一行也是最后一行)。
飞龙提示：
1、text-justify 主要针对IE浏览器中的汉字。
2、必须和text-align:justify一起使用才有效。
3、汉字最好是用加空格打散，才能保证在 Safari 里 也能 完完全全的两端对齐!
|
1 2 3 4 5 6 7 |
.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页面，要亲自测试。
本文更新网址：https://feilong.org/text-align-justify-safari-ios-chrome-andriod
2018-10-12 ~ 2026-02-28
加入收藏夹，查看更方便。
分类： html css教程