文字撑破容器需从盒模型入手，用 box-sizing:border-box 避免内容区缩水，配合 word-wrap:break-word 与 overflow:hidden/auto 控制换行和溢出。
文字撑破容器，本质是内容宽度超出了容器的 content box 范围，而默认情况下 CSS 不会自动换行或截断。解决它，得从盒模型理解出发，再配合 overflow 和文本换行控制来协同处理。
检查盒模型尺寸是否被 border/padding 挤占
常见误区：设了 width: 300px，但加了 padding: 10px 和 border: 2px solid 后，实际内容区只剩 276px，长单词或连续无空格字符串（如 URL、邮箱）极易溢出。
- 用
box-sizing: border-box让 width 包含 padding 和 border，避免内容区意外缩水 - 确认父容器没有意外的
min-width或white-space: nowrap干扰
强制文本换行：word-break / word-wrap / overflow-wrap
对中英文混排或长不可分字符串（如 base64、token），仅靠 white-space: normal 不够，需明确换行策略：
-
word-break: break-all：强制在任意字符间断行（适合纯技术字段，但中文体验略生硬） -
word-wrap: break-word（等价于overflow-wrap: break-word）：优先保持单词完整性，只在必要时切开过长单词（推荐大多数场景） - 搭配
white-space: normal使用，确保空格和换行符正常起作用
配合 overflow 控制溢出行为
overflow 不单是“隐藏滚动条”，它和换行共同决定视觉呈现：
立即学习 “ 前端免费学习笔记（深入）”；
-
overflow: hidden+word-wrap: break-word→ 安全截断，不出现横向滚动 -
overflow: auto→ 仅在真实溢出时显示滚动条（保留可读性，适合日志、代码片段等） - 慎用
overflow: visible（默认值），它会让文字直接突破容器边界，破坏布局流
特殊内容补充处理（URL、邮箱、数字串）
现代 浏览器 支持 text-wrap: balance（实验性）或更稳妥的方案：
- 对 URL 等，可添加零宽空格
或使用hyphens: auto（需 language 属性支持） - 用
max-width: 100%配合inline-block容器，让超长内联内容自适应折行 - CSS 中加
* {overflow-wrap: anywhere;}（谨慎全局应用）可对所有文本启用宽松换行
