中文英文左右padding一致两端对齐实现
7973次阅读
458人点赞
发布时间: 2022-11-24 16:19:45
扫码到手机查看
![]()
实际的例子
目前Firefox和Chrome纯中文（即使没有空格）也是可以自动两端对齐的，因此本文后面的内容实际上可以由下面的CSS代码组合实现！
.justify {
text-justify: inter-ideograph;
text-align: justify;
}无需使用麻烦的JS去处理。
分割线----------------------------------------------------------------------------------------------------
HTML
<div id="testBox" class="test_box">
为了最大化组件的品质，组件的实现要讲求分工...主次。
</div>
<p><button id="testBtn">对齐变身</button></p>CSS
.test_box {
width: 300px;
padding: 10px;
background-color: #e0e0e0;
font-family: 'microsoft yahei';
font-size: 14px;
}JS代码
var btn = document.getElementById("testBtn"),
box = document.getElementById("testBox");
if (btn && box) {
btn.onclick = function() {
box.style.textAlign = "justify";
box.style.letterSpacing = '-.15em';
box.innerHTML = box.innerHTML.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '').split("").join(" ").replace(/\s{3}/g, " ");
};
}实现原理
要理解原理，我们首先要搞清楚文本的两端对齐声明
text-align:justify起作用的本质。首先，大家要知道，text-align:justify是专门为英文设计的，谁叫CSS是老外发明的呢，用来实现英文语句的两端对齐。注意这里的，是语句的对齐。大家应该都知道，英文语句是一个单词一个单词组合而成的，每个单词之前使用空格分隔。text-align:justify之所以可以让英文段落两端对齐，那是因为每个英文单词之前那个透明看不见的空格被拉伸了。注意，是空格被拉伸了，对，只有空格。因此，当我们写下一段洋洋洒洒中文内容的时候，text-align:justify是没有任何作用的，跟没设置没任何区别。为什么呢？很简单，因为中文是一个一个汉字，汉字之间是没有空格的，自然也就不能拉伸，自然也就不能两端对齐。
怎么办呢？难道中文就不行了吗？
当然不是！既然正常的中文文字之间没有空格，我们自己加一点不就好了。例如下面代码：
"宁泽涛小鲜肉".split("").join(" ");会发现，每个中文文字之间都有的空格字符，于是，text-align:justify就能大发神威，实现两端对齐！
OK，现在两端对齐是实现了，但是，空格字符它也是真实存在的字符，是会占据宽度的。如果放任不管，文字就会太稀松，阅读很吃力，会被当bug提出来的，怎么办呢？
很简单，我们使用letter-spacing收缩字符间距就可以了。例如：
box.style.letterSpacing = '-.15em';不同字体的letter-spacing负值不一样，使用em单位呢，可以更智能适配各个font-size的文字。
使用JS再总结下就是（假设box是文字容器元素）：
ox.style.textAlign = "justify";
box.style.letterSpacing = '-.15em';
box.innerHTML = box.innerHTML.split("").join(" ");但是，上面的方法适用于中文内容，如果段落含有英文片段，会干掉原来的空格，因为三个空格会被当做一个空格距离处理，因此，我们还需要对连续3个空格左下特殊处理，因此代码进化成：
box.innerHTML = box.innerHTML.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '').split("").join(" ").replace(/\s{3}/g, " ");
目录