text-overflow: ellipsis 生效需同时满足：容器宽度固定（或受限制）、white-space: nowrap、overflow: hidden；缺一不可，常见错误是遗漏后两者或父容器未定宽。
text-overflow: ellipsis 为什么不起作用
必须同时满足三个条件，text-overflow: ellipsis 才会生效：容器宽度固定（或受限制）、white-space: nowrap、overflow: hidden。缺一个，文字就照常换行或溢出，甚至触发水平滚动条。
常见错误是只写了 text-overflow: ellipsis，却忘了设 white-space 和 overflow；或者容器用了 width: 100% 但父级没定宽，导致实际宽度不可控。
- 用
max-width比width更安全，尤其在响应式场景下 - 如果内容含中文 /Emoji，
white-space: nowrap仍可能被某些内联元素（比如<span>套了display: inline-block）破坏，建议检查子元素的display值 - Flex 容器中，子项默认不收缩，需加
min-width: 0防止文本撑开
flex 布局里文字撑破 container 的真实原因
Flex 项默认有 min-width: auto，浏览器会优先保障内容完整显示，哪怕突破父容器——这和“文字撑破布局”直接相关，也是最常被忽略的点。
典型现象：左侧图标 + 右侧标题的 flex 行，在窄屏下右侧文字把整行拉宽，触发水平滚动。
立即学习 “ 前端免费学习笔记（深入）”；
- 给文字容器加
min-width: 0，强制允许压缩 - 配合
overflow: hidden和text-overflow: ellipsis才能真正截断 - 不要依赖
flex: 1单独起效，它不改变min-width行为
table-layout: fixed 能不能救表格溢出
能，但只对 <table> 有效，且必须配合 table-layout: fixed + 指定列宽（如 width 或 col 元素），否则浏览器仍按内容自动计算列宽，照样撑破。
注意：现代项目里用 display: table 模拟表格布局时，table-layout: fixed 不生效——CSS 表格模拟不支持该属性。
- 给
<table>直接设table-layout: fixed，再给<col>或第一行<th>/<td>设width - 避免在单元格里放
flex或inline-block容器，它们可能绕过 fixed 布局约束 - 移动端慎用，
fixed下文字缩放或字体加载延迟可能导致列宽错乱
word-break 和 overflow-wrap 怎么选
word-break: break-all 会强行在任意字符间断行（包括中文词内、英文单词中间），适合纯数据展示；overflow-wrap: break-word（旧名 word-wrap: break-word）只在单词超长时才折行，更尊重语义。
两者都不解决根本的“外层无约束”问题，只是补救手段。用错反而让阅读变困难——比如中英文混排时，break-all 可能把“React.js”拆成“React.”和“js”。
- 优先用
overflow-wrap: break-word，兼容性好，行为可控 -
word-break: break-word是非标准写法，已废弃，别用 - 若必须用
break-all，建议限定范围，比如只对<code>或日志类预格式化文本生效
最隐蔽的坑其实是父容器没设 box-sizing: border-box，加上 padding 后实际内容区变窄，又没配 min-width: 0 或 overflow，结果文字硬生生把整条链路撑开。这种问题往往要查三层以上祖先元素才能定位。
