letter-spacing会让最后一个字符后多出空白,因其在每个字符右侧统一插入间距,导致总宽=字符总宽+n×letter-spacing;可用margin-right负值或text-indent抵消。

letter-spacing 为什么会让最后一个字符后多出空白
因为 letter-spacing 的作用机制是「在每个字符的右侧插入额外间距」,包括最后一个字符。它不是在「字符之间」加空隙(那样只有 n−1 个空隙),而是在每个字符渲染盒的右边缘统一外推一个固定宽度。所以字符串整体宽度 = 字符总宽 + n × letter-spacing 值,其中 n 是字符数 —— 最后一个字符右边那个空隙,就是多出来的“尾巴”。
用 margin-right 负值抵消最直接,但要注意适用场景
给文字容器加 margin-right: -Xpx(X 等于 letter-spacing 值)能视觉上抹掉尾巴,但只适合块级或行内块元素,且不能用于 input、button 这类替换元素内部文本 —— 它们不响应子元素的 margin,也不允许对伪元素做可靠定位。
- 对
div、p、span(display: inline-block)有效 - 若容器本身有
text-align: center,负 margin 会破坏居中逻辑,此时应优先考虑text-indent - 慎用于 Flex/Grid 容器中的子项,可能干扰主轴对齐
text-indent 修正居中偏移更稳妥,但仅影响首行
当 letter-spacing 导致 text-align: center 失效(整体左偏),本质是浏览器把「最后一个字符的右间距」也算进整行宽度参与居中计算。此时设置 text-indent: Xpx(X 同 letter-spacing),等于把整行内容向右平移一个字距,刚好补回偏差。
- 只作用于首行,多行文本时第二行及以后不会缩进,但通常标题/按钮文字都是单行,够用
- 对
input[type="submit"]、button兼容性好,无需计算原有 padding - 不能和
text-align: justify混用,否则首行缩进会破坏两端对齐效果
中文段落里用 letter-spacing 要格外小心
中文没有天然词边界,letter-spacing 会强行在每个汉字后插空,导致换行点错乱、文字撑出容器、甚至整段被当成不可折行字符串。这不是“尾巴”问题,而是排版逻辑崩溃。
立即学习“前端免费学习笔记(深入)”;
- 优先用
line-height、font-size、max-width控制可读性 - 真要微调字距,限定为
.btn-text { letter-spacing: 0.02em; font-family: "PingFang SC", sans-serif; }这类窄作用域 - 避免在
p或article上全局设letter-spacing,尤其不要用 px 单位


















