飞龙博客

feilong.org 前端开发教程

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

飞龙更新于 2021-01-23 07:11 加入书签 CTRL+D 有 690 个朋友来过

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

新作:

旧文:

  • html css js
  • angular react vue
  • flutter python