飞龙博客

前端文字教程

justify两端对齐前端css兼容火狐谷歌Safari安卓IOS解决方案

feilong.org 修订于2021-12-17 06:22:18 您好，第 1,622 位朋友！

此例子飞龙进行全面深入测试，如何让文字左右两端对齐。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页面，要亲自测试。

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

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

所在分类： html css 教程

新作：

旧文：