css如何实现中英文混杂段落文字两端对齐
今天分享一个小 tips,如何实现中英文段落文字两端对齐,我所分享的这个方法只是应对那些变态的需求。一般情况下还是不推荐使用的,毕竟使用了几句 js。
实现思路
一般的两端对齐是使用 text-align:justify,但是 text-align:justify 一般情况下只针对英文管用。(因为 css 是老外设计的,老外在 justify 判断的时候,是根据单词直接的空格来的,中文两个汉字之间没有空格,所以大部分情况下 text-align:justify 不管用,所以这个属性大部分形同虚设!)。
解决办法
步骤一 :就是在汉字之间添加空格,然后再去除空格来实现。
添加空格我们用 js 来实现,先 split 然后再 join 就可以了!
代码如下:
"某某某某码云笔记博客".split("").join(" ");
步骤二:添加空格之后,字间隙变大,会很难看,然后我们在用 css 的 letter-spacing 属性,进行相应的缩进。
代码如下:
letter-spacing: -0.15em;
这样就达到了两端对齐的效果。
总结
按照上面的思路,总结起来,用 jquery 实现代码如下:
$("#mybj").css({"text-align":"justify","letter-spacing":"-0.15em"}); $("#mybj").html()=$("#mybj").html().split("").join(" ");
注释
-0.15em 这个值可以指定,根据你当前的便宜来设置,-0.15em 值是经验所得!em 是一个单位,具体可以看我之前写的:
《常用的 CSS 字体单位:px、em、rem 和 % 看这篇就够了》
《视口百分比长度 vh、vw、vi、vb、vmin、vmax 单位的了解》
当然,也可以用纯 js 来实现这个效果!代码如下:
var box=document.getElementById("mybj"); box.style.textAlign = "justify"; box.style.letterSpacing = '-.15em'; box.innerHTML = box.innerHTML.split("").join(" ");
文本两端对齐
.text{ text-align: justify; text-align-last: justify; }
flex 布局实现
display:flex;justify-content: space-between;
结语
以上就是中英文混杂段落文字两端对齐方法总结,希望大家根据自己实际需求使用,还是那句话,只是应对那些变态的需求,如果大家有更好的方法欢迎投稿或是下方评论留下你的宝贵方法,不胜感激。
码云笔记 » css如何实现中英文混杂段落文字两端对齐