用 white-space: nowrap + overflow: hidden 就够了；加 text-overflow: ellipsis 是为了显示省略号，不是“强制不换行”的必要条件。white-space: nowrap 仅阻止换行但不隐藏溢出，必须配合 overflow: hidden 才能裁剪内容并使 text-overflow: ellipsis 生效，且需容器有明确宽度及 table-layout: fixed（表格场景）。
直接给结论：用 white-space: nowrap + overflow: hidden 就够了；加 text-overflow: ellipsis 是为了显示省略号，不是“强制不换行”的必要条件。
为什么只设 white-space: nowrap 不够
单独设置 white-space: nowrap 确实能阻止换行，但文本会直接撑破容器、覆盖右侧元素，甚至拖出横向滚动条。这不是“隐藏”，只是“不处理溢出”。实际项目中几乎从不单独用它。
必须配合 overflow: hidden 才真正实现“超出部分不可见”——这是视觉上“被截断”的关键一步。
-
overflow: hidden会裁剪掉所有超出盒模型边界的内容（包括文字、阴影、子元素） - 如果父容器没有明确宽度（比如
width或max-width），overflow: hidden可能无效或行为异常 - 注意：
overflow: hidden也会禁用子元素的position: absolute溢出显示（除非父级有transform等触发层叠上下文）
text-overflow: ellipsis 的生效前提很具体
这个属性不会自动生效，它只在同时满足以下两个条件时才起作用：
立即学习“前端免费学习笔记（深入）”；
-
overflow值为hidden或scroll -
white-space值为nowrap（对单行）或pre/pre-wrap（极少见）
漏掉任意一个，text-overflow: ellipsis 就是摆设。它不会改变布局，也不会影响换行逻辑，纯属视觉提示。
另外：text-overflow 只对**块级容器内的内联内容**有效（比如 <p></p>、<span></span> 包裹的文字），对 display: flex 或 display: grid 容器中的子项默认不生效。
表格单元格（<td>）要额外加 <code>table-layout: fixed
在 <table> 中直接给 <code><td> 设 <code>white-space: nowrap 和 overflow: hidden，往往没反应。因为表格默认是 table-layout: auto，列宽由内容撑开，overflow 失效。
- 必须在
<table> 上设 <code>table-layout: fixed - 再给
<td> 设置 <code>width（或max-width）、white-space: nowrap、overflow: hidden - 否则浏览器会优先按内容重算列宽，根本不会触发溢出逻辑
- IE8+ 支持
text-overflow: ellipsis，但仅限于block或inline-block元素，inline（如默认<span></span>）需显式设display: block或inline-block - 移动端 Safari 对
-webkit-line-clamp（多行省略）支持好，但对单行text-overflow在某些 zoom 场景下可能渲染错位，建议加min-width: 0防止弹性容器干扰
容易忽略的兼容性细节
绝大多数现代浏览器都支持 white-space: nowrap 和 overflow: hidden，但有两点常踩坑：
真正卡住人的，往往不是语法写错，而是忘了容器有没有宽度约束、有没有被 flex/grid 的默认行为覆盖、或者在 table 里没动 table-layout。这些地方一漏，整套规则就静默失效。
