text-overflow: ellipsis 单独无效，必须配合 white-space: nowrap、overflow: hidden 及明确宽度（width/max-width）才能生效；它仅作用于单行文本，多行需用 -webkit-line-clamp 等方案。
直接用 text-overflow: ellipsis 是无效的——它必须和 white-space: nowrap、overflow: hidden 一起用，且容器得有明确宽度。
为什么单独设 text-overflow: ellipsis 没反应
因为 text-overflow 只在「文本已溢出但被裁剪」时才起作用。浏览器默认允许换行，文本会自动折行填满容器，根本不会触发“溢出”条件。所以你看到样式写了却没省略号，大概率是漏了下面三件事：
-
white-space: nowrap没加 → 文本照常换行，不溢出 -
overflow: hidden没加 → 即使溢出，内容也全显示出来，没裁剪就没有省略号位置 - 容器没设
width或max-width→ 宽度自适应内容，永远“不溢出”
text-overflow 在表格 <td> 里失效怎么办<p>表格单元格默认使用自动布局（<code>table-layout: auto），列宽由内容撑开，width 约束常常被忽略。这时候即使写了三件套，text-overflow 依然不生效。
解决方法是强制表格用固定布局：
table {
table-layout: fixed;
width: 100%;
}
td {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 150px; /* 或用 max-width */
}
注意：table-layout: fixed 后，列宽优先按 <col> 或第一行 <td> 的 <code>width 计算，否则仍可能松动。
多行文本想截断并显示省略号，能只用 text-overflow 吗
不能。text-overflow: ellipsis 只对单行有效，多行必须靠 -webkit-line-clamp 配合弹性盒子实现：
.multi-line {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* 显示2行 */
overflow: hidden;
}
这个方案的问题很实在：
- Firefox 不支持
-webkit-line-clamp（截至 2026 年 5 月仍无原生支持） -
-webkit-box已是过时的 flex 前身，现代布局中若父容器用了display: flex或grid，子元素再套-webkit-box可能被覆盖或冲突 - 行数必须写死，无法根据高度动态计算
真正容易被忽略的是：哪怕所有 CSS 属性都写对了，如果容器是 inline 元素（比如 <span></span>），也得先加 display: inline-block 或 block，否则 width 和 overflow 均不生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
