移动端文字溢出的典型表现是小屏下导航栏文字挤成一团、卡片标题换行错位、按钮内文字撑出边界，根源在于letter-spacing未随字号缩放，固定px值在窄屏下显得过重。
移动端文字溢出的典型表现是什么
小屏下导航栏文字挤成一团、卡片标题换行错位、按钮内文字撑出边界——这些不是字体太大，而是letter-spacing没随字号缩放，导致固定像素值在窄屏下“过重”。Bootstrap 默认不干预字符间距，px单位写死后，小屏时字距不变但字变小，视觉上反而更密；更糟的是，.form-control或.btn这类交互组件加了letter-spacing后，光标偏移、选区错位在 Safari 里很常见。
为什么用 em 不用 px 设置 letter-spacing
em是相对于当前元素font-size的单位，而移动端文字常靠clamp()或vmin动态缩放。如果用px，比如letter-spacing: 1px，在font-size: 14px时合理，在font-size: 10px时就显得过松，容易断词；换成0.04em，它会跟着字号等比收缩，保持疏密节奏一致。
- 正文段落推荐
letter-spacing: 0.04em - 标题类（如
.modal-title）可用0.08em，但别超过0.1em，否则小屏易断开 - 纯英文区域（如
.navbar-nav .nav-link）可降到0.02em，避免字母间隙过大 - 绝对禁用负值对
<small>或.text-muted—— 12px 下-0.02em已接近汉字粘连临界点
哪些地方绝对不能加 letter-spacing
直接往 .form-control、.btn、.badge 这类 Bootstrap 组件上加 letter-spacing，大概率触发渲染异常：输入框光标定位漂移、按钮文字截断、徽章圆角被撑破。它们内部有精细的行高与内边距计算，外挂字距会破坏 baseline 对齐。
- 正确做法：只作用于纯文本容器，如
<h2 class="hero-heading">、<p class="lead">、<div class="card-text"> - 中英文混排时，拆开控制：
.hero-heading .en-only { letter-spacing: 0.02em; } - 若必须微调表单内文字，改用
font-feature-settings: "kern"+ 固定font-size和line-height，比硬拉间距稳得多
配合 line-height 才算真正防溢出
只调 letter-spacing 不动 line-height，等于把字拉松了但行距没动，视觉上反而单薄空洞，小屏阅读节奏失衡。Bootstrap 的 .lead 默认 line-height: 1.6，当你给它加 letter-spacing: 0.06em 后，建议同步微调为 line-height: 1.55 或 1.52，让松散感和垂直节奏匹配。
最易忽略的一点：移动端需降级。比如桌面端用 0.06em，在 @media (max-width: 576px) 里收紧到 0.02em，防止窄屏下长单词间隙过大导致换行异常或右侧留白突兀。
