小tip:中文或英文左右padding一致两端对齐实现
这篇讲的是解决中英文混合文本在定宽容器中右端不对齐的前端小技巧。作者从同事遇到的实际问题出发,揭示了CSS的text-align:justify属性主要针对英文单词间的空格进行拉伸,而中文字符间没有空格,因此默认无法生效。 解决方法的核心思路是:用JS为每个字符(包括中文)之间插入空格,使justify生效;随后通过letter-spacing负值(例如-0.15em)来抵消空格带来的多余宽度,恢复紧凑的视觉间距。这样仅需三行代码,就能实现完美的两端对齐效果,且兼容性良好,包括IE7。 作者通过效果截图和简明代码,将这个看似基础却常被忽略的方案讲得很清楚。对于前端开发者来说,这是一个在需要文本版式规整的场景下,值得收藏的实用小方案。