letter-spacing会真实增加文本块宽度，因其在每个字符右侧统一外推固定值，总宽=字符总宽+字符数×letter-spacing值；可用margin-right负值精确抵消，但需单位一致、慎用于动态内容。
letter-spacing 会让整个文本块变宽，不是“视觉错觉”，而是真实增加了盒模型宽度——直接导致 overflow、换行异常或遮挡相邻元素。
letter-spacing 怎么偷偷加宽了容器
它不是在“字符之间”插空隙（那样只有 n−1 个），而是在每个字符右侧统一外推一个固定值。所以总宽度 = 字符总宽 + 字符数 × letter-spacing 值。比如 "ABC"（3 个字符）设 letter-spacing: 4px，就多出 12px 宽度，最后一个字符右边还挂着 4px “尾巴”。
常见现象：
- Flex 容器里文字突然换行，或把兄弟元素挤出视口
-
text-overflow: ellipsis提前截断，省略号紧贴文字没空隙 - 响应式卡片标题在小屏下顶穿
padding，甚至覆盖下方按钮
margin-right 负值是最直接的修复方式
用 margin-right 抵消掉那个“尾巴”最简单，尤其适合已知固定值的场景（如导航菜单、Logo 文字）：
h2 {
letter-spacing: 0.05em;
margin-right: -0.05em;
}
注意点：
- 必须用相同单位，
letter-spacing: 2px就配margin-right: -2px，混用 em/px 会错位 - 别对整段中文
p或div盲目加，字符数动态变化时负 margin 会过量 - 如果父容器有
overflow: hidden，先确认是否真被裁剪——DevTools 的 Layout 面板里看 computed width 是否膨胀
text-indent 不是万能替代，慎用于非首行
text-indent 只影响首行开头，但有人误以为它能“向左拉回”所有字符间距。实际上它只缩进第一行第一个字符位置，对后续行或单行内其他字符无效。
仅在以下情况可用：
- 单行标题，且
letter-spacing值恒定 - 配合
white-space: nowrap强制不换行 - 需手动计算：若设
letter-spacing: 0.1em，则text-indent: -0.1em只抵消第一个字符右侧的空隙，其余 2～n 个空隙仍在
更稳妥的做法是改用 display: inline-block 包一层再调 margin-right，避免影响段落流。
响应式场景下别硬写 px，用 em 绑定字号缩放
媒体查询里写 letter-spacing: -0.5px 在 Retina 屏上可能被四舍五入为 0，iOS Safari 对 subpixel 负值尤其保守。安全做法是让间距随字体大小同比例缩放：
h1 {
font-size: clamp(1.5rem, 4vw, 2.5rem);
letter-spacing: 0.02em; /* 自动按当前 font-size 计算 */
margin-right: -0.02em;
}
关键细节：
- em 单位基于当前元素的
font-size，不是父级，不会继承错乱 - 中英文混排时，同一
0.02em对英文明显、对中文微弱——这反而是好事，避免中文被强行撑开 - WebFont 加载完成前，浏览器可能用系统字体渲染，字宽不同，导致初始溢出；可配合
@font-face的font-display: optional或 JS 动态补正
真正难处理的是动态内容：用户输入的昵称长度不可控，又要求加 letter-spacing 做品牌感。这时候别硬修 margin，优先限制最大字符数，或换用 font-kerning: auto 配合字体自身字距，比全局拉伸更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
