内容溢出主因是white-space: nowrap、固定宽容器或未设断行策略，解决需组合overflow-wrap/word-break、禁用冗余min-width、为table/pre加响应式控制。
内容溢出是因为 white-space: nowrap 或固定宽容器
窄屏下文字/表格/代码块撑破容器，常见于未设断行策略的内联元素、table、或父容器用了 min-width 却没配换行逻辑。浏览器默认不会为长单词或连续无空格字符串（如 URL、base64 片段）自动折行。
- 检查是否误加了
white-space: nowrap（尤其在按钮、标签、表格单元格里） - 确认父容器没有硬编码
min-width: 375px这类值，又没配合max-width和流式布局 - 表格默认不响应式，
table-layout: fixed+width: 100%才可能触发列宽重算
用 word-break 和 overflow-wrap 控制长文本断行
二者分工明确：word-break: break-all 强制在任意字符间断行（适合纯英文/数字场景）；overflow-wrap: break-word（旧名 word-wrap: break-word）只在必要时把超长单词挤进下一行，更友好。
/* 推荐组合：优先保语义，再降级强制断 */
.text-content {
overflow-wrap: break-word;
word-break: keep-all; /* 中文/日文等不拆字 */
}
/* 纯英文日志、token 类内容可启用 */
.token-string {
word-break: break-all;
overflow-wrap: anywhere; /* 更现代的替代 */
}注意：word-break: break-word 是无效写法，别混淆。
min-width 要慎用，改用 max-width + width: fit-content
设 min-width: 320px 会让容器在 iPhone SE 上也强行占满，反而加剧溢出。响应式更合理的做法是让内容“尽量收缩”，再用媒体查询兜底。
立即学习“前端免费学习笔记（深入）”；
- 去掉全局
min-width，改用max-width: 100%配合width: fit-content或inline-block - 对卡片、表单等区块，用
width: 100%+box-sizing: border-box确保 padding 不撑宽 - 真需要最小宽度？只在特定组件上用
@media (min-width: 768px)限定，而非全局
表格和预格式化内容要单独处理
pre、code、table 是溢出重灾区，它们默认无视父容器宽度约束。
/* 表格：必须加 table-layout + 宽度控制 */
.responsive-table {
width: 100%;
table-layout: fixed;
}
.responsive-table td,
.responsive-table th {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
<p>/<em> 代码块：允许横向滚动，比折行更保可读性 </em>/
code,
pre {
display: block;
overflow-x: auto;
max-width: 100%;
-webkit-overflow-scrolling: touch;
}横向滚动比胡乱折行更适合技术文档——用户能精准选中整行命令，不会因断行产生歧义。
窄屏溢出本质是「容器尺寸策略」和「内容断行策略」没对齐。最常被忽略的是：开发者调了 min-width 却忘了删掉旧的 white-space: nowrap，或者给 pre 加了 word-break 却没配 overflow-x: auto，结果既不能滚也不能折。
