文字撑破容器的根源是盒模型尺寸失控或换行逻辑被锁死，需检查white-space是否为normal/pre-wrap、设置max-width/min-width触发换行、用box-sizing:border-box避免padding/border挤占、慎用word-break与overflow-wrap混用，并确保父容器形成bfc。
文字撑破容器，不是“内容太多”，而是盒模型尺寸失控或换行逻辑被锁死——加 overflow: hidden 只是遮羞，不解决根源。
white-space 是换行开关，必须先检查它
所有换行控制（overflow-wrap、word-break）都依赖 white-space 处于可折行状态。如果它是 nowrap、pre 或继承自父级（比如按钮、表格单元格、Flex 项），那再配什么断词属性都没用。
- 用浏览器开发者工具查目标元素的 computed
white-space值，确认是normal或pre-wrap - 若需保留原始空格和换行符，用
white-space: pre-wrap；日常文本用normal就够 - 绝对别在响应式卡片或列表项里全局设
white-space: nowrap，除非你明确要配text-overflow: ellipsis
max-width 和 min-width 才是换行触发器
overflow-wrap: break-word 不是“自动换行”，而是“当整词放不下当前可用宽度时才断”。如果容器没显式约束宽度，浏览器会认为“还有空间”，根本不会走断词逻辑。
- 给文本容器加
max-width: 100%或具体值（如max-width: 300px） - 如果是 Flex 子项，额外加
min-width: 0—— 默认min-width: auto会阻止收缩，导致换行失效 - 表格单元格要生效，得配合
table-layout: fixed+ 显式width - 浮动布局下父容器高度塌陷，也会让宽度计算为 0，此时
overflow-wrap彻底失效
box-sizing 和 overflow 要协同选型
设了 width: 300px 却仍撑破，大概率是 padding 和 border 挤占了内容区。而 overflow 的行为又直接决定用户能否看到溢出内容。
- 统一用
box-sizing: border-box，让width包含padding和border - 要安全截断：用
overflow: hidden+overflow-wrap: break-word - 要保留可读性（如日志、代码块）：用
overflow: auto，但记得配max-height防止无限撑高 - 慎用
overflow: visible（默认值），它会让文字直接突破边界，破坏布局流
word-break 和 overflow-wrap 别混用
二者行为冲突：word-break: break-all 会在任意字符间切分（包括中文、长数字串），而 overflow-wrap: break-word 只在必要时保守断词。同时声明时，前者常覆盖后者逻辑。
- 日常防溢出，优先用
overflow-wrap: break-word（word-wrap: break-word是旧名，仍可兼容） - 纯技术字段（如 ID、base64）才用
word-break: break-all，且仅限该字段，不污染全局 - 别写
word-break: keep-all再配overflow-wrap—— 前者禁中文断字，后者又试图断词，结果就是全部溢出
最易被忽略的是：哪怕所有 CSS 都写对了，如果父容器没形成 BFC（比如没清除浮动、没设 overflow、没用 display: flow-root），它的宽度就可能算错，所有换行控制都会失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
