单行截断需同时满足四条件：明确宽度、white-space: nowrap、overflow: hidden、text-overflow: ellipsis，且均作用于同一元素；多行截断推荐 -webkit-line-clamp（配 display: -webkit-box 和 -webkit-box-orient: vertical），现代浏览器可渐进增强用 line-clamp。
单行截断为什么加了 text-overflow: ellipsis 还不生效
根本原因不是 CSS 写错了，而是四个条件没同时满足：容器必须有明确宽度（width 或 max-width）、white-space: nowrap、overflow: hidden、text-overflow: ellipsis——且全部作用在**同一元素**上。
常见失效场景：
- 父容器用 Flex 布局，子元素没设
min-width: 0或overflow: hidden，导致width被忽略 - 把
overflow: hidden写在父级<div> 上，而文本在子 <code><p></p>里 → 父级裁的是整个子元素框，不是文本流 - 用了
white-space: pre-line或normal，但没切到nowrap，文本自动换行了，根本不会“溢出” - 元素是纯
inline（比如没设display的<span></span>），text-overflow对它无效，得先加display: inline-block或block -
-webkit-line-clamp只对块级元素有效，且要求父容器高度由内容撑开（不能设固定height，否则会遮盖或错位） - 不能和
flex/grid直接混用——子项需显式设display: -webkit-box，否则会被布局引擎覆盖 - 若文本含
<br>或white-space: pre-wrap，截断位置可能异常，建议统一用纯空格+软换行
多行截断必须用 -webkit-line-clamp 吗
是目前最稳定、浏览器支持最广的方案，但它本身是 WebKit 私有属性，必须配合 display: -webkit-box 和 -webkit-box-orient: vertical 才能工作。不能单独使用。
标准方案 line-clamp（无前缀）已在 Chrome 125+、Firefox 126+、Safari 17.4+ 支持，但旧版 Safari（≤17.3）和部分安卓 WebView 仍需回退到 -webkit- 版本。
关键限制：
-webkit-line-clamp 的参数怎么设才不出错
值必须是正整数（如 2、3），不能是 0、负数、小数或变量。设成 1 不等于单行 truncate，它仍走多行盒模型路径，性能略低，且在某些安卓 WebView 中表现不稳定。
推荐写法（带渐进增强）：
.clamp-2 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
<p>/<em> 标准语法兜底（现代浏览器） </em>/
display: grid;
line-clamp: 2;
}
</p>
注意：line-clamp 是 overflow 的子属性，不能和 text-overflow 混搭；也不支持自定义省略符号（始终是 …）。
Flex 容器里多行截断突然失效怎么办
根本原因是 Flex 子项默认 min-width: auto，会阻止 -webkit-box 的高度计算。不是改 flex 属性，而是加一层约束：
- 给截断元素加
min-width: 0（最轻量） - 或加
overflow: hidden（副作用：可能隐藏其他浮动内容） - 或在外层再包一个
<div>，把所有截断样式写在这层上（最稳妥，兼容性最强）<p>Grid 场景同理：列轨道未设 <code>minmax(0, 1fr)时，子项宽度不可控，-webkit-line-clamp就会失效。别试图靠align-self修复，直接约束轨道尺寸。真正容易被忽略的点：多行截断依赖行高（
line-height）参与计算，如果文本用了动态字号（如rem或em），且未配等比line-height，截断行数可能偏移 0.5 行——这不是 bug，是盒模型渲染的必然结果。
