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 单位
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
