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;

结语

以上就是中英文混杂段落文字两端对齐方法总结，希望大家根据自己实际需求使用，还是那句话，只是应对那些变态的需求，如果大家有更好的方法欢迎投稿或是下方评论留下你的宝贵方法，不胜感激。

原文链接：《小 tip:中文英文左右 padding 一致两端对齐实现》

以上关于css如何实现中英文混杂段落文字两端对齐的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。