使用 box-sizing: border-box 可解决 padding 导致固定宽度容器内文字意外换行的问题，它使 width 包含 padding 和 border，避免内容区被挤压；还需配合 word-break、overflow-wrap 或 text-overflow 等文本控制属性，并检查 flex/grid 布局中的最小尺寸约束。
padding 导致文字在固定宽度容器中意外换行
这是盒模型理解偏差的典型表现：当给一个设置了 width 的块级元素加 padding，实际内容区变窄，长单词或连续无空格文本（如 URL、token）极易触发换行。浏览器默认按 content-box 计算——width 只管内容区，padding 额外撑开总宽，但换行判断依据仍是缩窄后的内容区宽度。
用 box-sizing: border-box 替代默认行为
把盒模型切换为 border-box，让 width 包含 padding 和 border，内容区自动收缩，避免因 padding 挤压导致换行阈值变小。这是最直接、兼容性极好的解法（IE8+ 支持）。
div {
width: 200px;
padding: 12px;
box-sizing: border-box; /* 关键：padding 不再额外增加总宽 */
}- 必须显式声明
box-sizing: border-box，不能依赖重置库的全局设置（容易被覆盖） - 若项目已用
* { box-sizing: border-box }，检查是否有局部样式重写成content-box - 注意：该设置不影响
margin，它始终在盒子外部
对长单词/URL 强制不换行或可控截断
即使用了 border-box，超长无空格字符串仍可能溢出或换行。需配合文本控制属性：
p {
width: 200px;
padding: 12px;
box-sizing: border-box;
word-break: break-all; /* 强制在任意字符处换行（慎用，影响可读性） */
/* 或 */
overflow-wrap: break-word; /* 优先在空白处换行，不得已才断单词 */
/* 或 */
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden; /* 单行截断加省略号 */
}-
word-break: break-all对中文无效（中文本就可断），但对英文 URL、base64 等有效；缺点是可能把 “example.com” 断成 “exa…”，语义断裂 -
overflow-wrap: break-word更友好，只在必要时断单词，推荐作为默认选项 - 若容器高度固定且需多行显示，用
display: -webkit-box+-webkit-line-clamp控制行数
检查是否被父容器或 flex/grid 布局间接影响
有时 padding 没问题，但父容器用了 flex 或 grid，子项默认 min-width: auto，会阻止收缩，导致内容区无法适应 padding 后的剩余空间，进而换行。
立即学习“前端免费学习笔记（深入）”；
- 在 flex 容器中，给子项加
min-width: 0（或overflow: hidden）释放收缩能力 - grid 中类似，确保
grid-template-columns没用固定px值锁死列宽，改用minmax(0, 1fr) - 用浏览器开发者工具的“布局”面板，看 computed
width和content area是否符合预期
padding 和 width 的配合本质是盒模型控制问题，真正容易忽略的是：它常和 flex/gird 的最小尺寸约束、以及文本换行策略叠加生效——单改一个属性往往不够，得连着看三层。
