900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > css中英文混合实现两端对齐

css中英文混合实现两端对齐

时间:2022-12-11 00:39:22

相关推荐

css中英文混合实现两端对齐

(处理前)

(处理后)

一般的两端对齐是使用text-align:justify,但是text-align:justify一般情况下只针对英文管用。(因为css是老外设计的,老外在justify判断的时候,是根据单词直接的空格来的,中文两个汉字之间没有空格,所以大部分情况下text-align:justify不管用,所以这个属性大部分形同虚设!)。

解决办法

(1) 就是在汉字之间添加空格,然后再去除空格来实现。

添加空格我们用js来实现,先split然后再join就可以了!

代码如下:

"某某某某haorooms博客".split("").join(" ");

(2)添加空格之后,字间隙变大,会很难看,然后我们在用css的letter-spacing属性,进行相应的缩进。

代码如下:

letter-spacing: -0.15em;

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。