CSS 文字左右对齐效果兼容性实现

275 阅读1分钟

需求是这样:设置固定的宽度,每一行可能的字数不一样,但是需要左右都要对齐。 示例图:

image.png

一开始我使用了最常见的text-align:justify;text-align-last:justify

可行!但是在safari里失效了,被ui姐姐校对的时候打回来了(没有iphone手机是我的错么!哭)

后来活用搜索引擎搜到了其他的方法:在text后面设置一个:after伪元素,让text有了第二行,具体操作方法是:

display:inline-block;content:'';width:100%;height:0;

按道理是可以的,但是不知道为啥在我这儿也失效了 所以我想出了一个终极方法:直接将这个文字split成数组,每一个字生成一个span,然后设置父元素的justify-content:space-between

完美!芜湖