飞龙博客

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

两端对齐 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 对非最后一行起作用。此法最佳！但是，会多一行高度！

方法二： text-align:justify 和 text-align-last:justify; 结合起来用。但是Safari不支持 text-align-last. 此法不适合IOS！

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

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

想学前端？点击飞龙QQ

分类： 前端开发

新作：echarts自适应尺寸宽度高度eharts销毁与重建

旧文：解决css样式表在ie11中无效的问题