飞龙博客

feilong.org 前端开发教程

两端对齐 justify 测试兼容火狐谷歌Safari 安卓IOS

飞龙修订于 20201007 04:47 42 次浏览

两端对齐 justify 测试兼容火狐谷歌Safari 安卓IOS。

两端对齐 justify
此例子 飞龙进行全面深入测试 如果让 文字左右两端对齐。特别是兼容ios或safari浏览器,该怎么办的解决方案。

text-align:justify; 不处理块内的最后一行文本。 包括块内仅有一行文本,既是第一行也是最后一行。

注意:text-justify 主要针对 IE浏览器中的汉字 进行处理!必须和text-align:justify一起使用才有效。

汉字最好是用加空格打散,才能保证在 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

 

如何设置文本两端对齐呢? 如何设置文本两端对齐呢? 如何设置文本两端对齐呢?对齐呢?对齐呢

 

网址:https://feilong.org/text-align-last-justify-safari-ios-chrome-ie
初发:20181012 09:59

想学前端?长按二维码加我微信

想学前端?点击飞龙QQ

分类: 前端开发

新作:

旧文:

关闭

长按二维码 -> 识别图中二维码

打开微信,发现,扫一扫

支付完成后,点击下一步

感谢大力支持

然后你手机号:

最后点这,稍等即可