溢出问题根源在于盒模型计算与内容尺寸失控，需同时约束box-sizing（必设border-box）、内容换行（word-break/overflow-wrap）及容器轨道定义，单一修复无效。
固定宽高本身不会导致溢出，真正的问题是盒模型计算方式 + 内容自然尺寸失控。必须同时约束盒模型行为和内容换行逻辑，否则 width: 200px; height: 100px 就是个“牢笼”，但内容会直接撞穿它。
box-sizing: border-box 是前提，不是可选项
默认 box-sizing: content-box 下，width: 200px 只管内容区，padding: 12px 和 border: 1px 会额外加在 200px 外面，实际占宽 226px —— 这已经溢出了。不加 box-sizing: border-box，后面所有断行、截断都是在补救一个本不该发生的问题。
- 全局最稳写法：
*, *::before, *::after { box-sizing: border-box; } - 局部修复时，必须确认目标元素的「Computed」面板里
box-sizing确实是border-box，而不是被第三方 CSS 覆盖了 -
html, body { box-sizing: border-box }无效 ——box-sizing不继承，子元素仍用默认值
长无空格文本（如 URL、base64）必须配 word-break 或 overflow-wrap
width: fit-content 或 width: 200px 对连续字符毫无约束力。浏览器不会自动折行，哪怕撑破容器也要把整串“aaaaabbbbbccccc…”画出来。这时候 text-overflow: ellipsis 也无效，因为它只对单行 + white-space: nowrap 生效。
- 允许单词内断行：
word-break: break-all（中文、英文都适用） - 更温和的方案：
overflow-wrap: break-word（只在必要时断，优先保词义） - 别只写
white-space: normal—— 它对无空格长串没用，normal的换行规则依赖空格或连字符
高度受限时，单行截断要用 text-overflow 组合技
设了 height: 40px 还想显示省略号？光靠 overflow: hidden 不够，必须切断换行能力并激活截断逻辑。
- 三件套缺一不可：
white-space: nowrap+overflow: hidden+text-overflow: ellipsis - 如果容器用了
display: flex，记得给文字元素加flex-shrink: 0，否则 flex 会先压缩它再截断 -
line-clamp可用于多行截断，但它需要display: -webkit-box，且不支持所有旧浏览器
Grid / Flex 子项溢出，别怪 width，先查列轨道定义
在 grid-template-columns: auto 50px auto 里放一个 width: 100% 的子项，它照样溢出 —— 因为中间那列硬编码 50px，减去 margin 后只剩 40px 可用宽度。此时改子项样式没用，得动网格轨道。
- 把固定像素列（如
50px）换成auto或minmax(min-content, max-content) - 用
1fr auto 1fr替代auto 50px auto：两侧弹性分配剩余空间，中间列由内容决定宽度 - 检查
grid-column-start/grid-column-end是否意外跨列，导致内容被挤进窄轨道
溢出从来不是单一属性的问题。它总在 box-sizing、内容自然尺寸、容器轨道约束、换行策略这四者交汇处爆发 —— 漏掉任何一个，修了表面，问题换个姿势又回来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
