text-overflow: ellipsis 非独立生效，必须同时满足：容器有 width 或 max-width、white-space: nowrap、overflow: hidden；漏一不可，且需配合 display: block 或 inline-block，flex 子项还需 min-width: 0。
text-overflow: ellipsis 为什么加了没反应
它根本不是独立生效的属性，而是依赖三个条件同时成立：容器必须有明确宽度（width 或 max-width）、white-space: nowrap 强制单行、overflow: hidden 才能触发裁剪。漏掉任意一个，省略号都不会出现。
常见踩坑点：
- 给
<span></span>这类内联元素直接加这三件套——width和overflow对它无效，得先设display: inline-block或display: block - 父容器是
display: flex，子元素没加min-width: 0，导致 flex 项目拒绝收缩，overflow形同虚设 - 写了
text-overflow: ellipsis却忘了white-space: nowrap，文本照常换行，根本没机会“溢出”
长英文单词或 URL 撑破容器怎么办
浏览器默认只在空格、连字符、标点处换行，遇到 https://example.com/verylongpathwithoutslash 或 internationalization 就直接横向溢出——这不是 bug，是默认行为。
正确解法是用 overflow-wrap: break-word（别用 word-break: break-all）：
-
overflow-wrap: break-word先尝试整词换行，放不下才断词，对 URL、邮箱、英文段落友好 -
word-break: break-all会无差别切开字符，把https://拆成https:/ /，语义断裂 - 若 URL 内部断点不理想（比如斜杠后不换），可服务端预处理，在
/、?、&后插入零宽空格，前端无需 JS 即可响应式折行
用户提交的带换行符文本怎么保留又自动折行
表单提交的评论、日志等含 \n 的文本，直接塞进 <div> 里会被浏览器当空格塌成一行；用 <code>white-space: pre 又不折行，长行直接横向溢出。
唯一兼顾两者的方案是：white-space: pre-wrap：
- 原样保留所有
\n、\t和空格 - 同时允许在容器右边界自动折行
- 不能和
text-overflow: ellipsis混用——二者逻辑冲突，pre-wrap下省略号不会出现 - 别额外套
<pre class="brush:php;toolbar:false;"></pre>或<p></p>，直接作用于目标元素即可
表格单元格里长内容不换行
很多 UI 框架（如 Bootstrap）悄悄给 <td> 加了 <code>white-space: nowrap，或者没设 table-layout: fixed，导致长 URL 或英文单词死活不折行。
关键动作只有两个：
- 给
<td> 加 <code>white-space: normal（或显式重置为pre-wrap） - 给
<table> 加 <code>table-layout: fixed，否则列宽由内容撑开，word-break类属性基本失效 - 如果还要配合
text-overflow: ellipsis，就得切换思路：先关掉换行（white-space: nowrap），再加max-width+overflow: hidden，但这是标题类短文本场景，不是长内容
最隐蔽的问题往往不在样式本身，而在父级布局约束——Flex 项目缺 min-width: 0、表格缺 table-layout: fixed、内联元素没改 display，这些才是实际项目里卡住半天的真凶。
