text-overflow: ellipsis 生效需同时满足：容器有明确宽度（或max-width）、white-space: nowrap、overflow: hidden；单行三者缺一不可，多行推荐-webkit-line-clamp方案但兼容受限，Firefox需用max-height+伪元素fallback，行内元素须先设inline-block。
text-overflow: ellipsis 要生效，必须同时满足三个条件：容器有明确宽度（或 max-width）、white-space: nowrap、overflow: hidden。缺一不可，否则省略号根本不会出现。
单行溢出：三要素缺一不可
这是最常失效的场景——看着写了 text-overflow: ellipsis，但省略号就是不显示。
-
width或max-width必须显式设置（百分比、px、rem都行；flex里还要加min-width: 0防止子项被拉伸） -
white-space: nowrap是前提：没它，文本自动换行，根本不会“溢出” -
overflow: hidden是触发器：text-overflow只对被overflow裁剪的内容起作用
.title {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
多行溢出：WebKit 方案是主流，但有兼容限制
-webkit-line-clamp 是目前最可靠、写法最简洁的多行截断方式，但它只在 Chrome、Safari、Edge（基于 Chromium）等 WebKit/Blink 内核浏览器中有效。
- 必须配合
display: -webkit-box和-webkit-box-orient: vertical -
-webkit-line-clamp: 2表示最多显示 2 行，超出部分隐藏并加省略号 - 不支持 Firefox（截至 2026 年初仍无原生支持），也不能用在
flex或grid容器直系子元素上（需额外 wrapper）
.desc {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
width: 250px;
}
多行兼容 fallback：用 max-height + 伪元素模拟
当需要支持 Firefox 或老版 Edge 时，只能退而求其次：靠行高和高度计算 + ::after 伪元素盖住末尾，再用渐变遮罩营造省略号视觉效果。
Knowledge Graph - Csv Graph Loader Generator
下载
从 CSV 数据集生成图数据库加载器和三元组映射。将表格 CSV 数据转换为图数据库可直接使用的节点、边和三元组。
- 核心是
line-height: 1.5× 行数 =max-height: 4.5em（比如 3 行） -
::after放在右下角，用background: linear-gradient(to right, transparent, #fff 50%)实现自然过渡 - 缺点是省略号不是真实文字，无法复制；高度计算依赖固定行高，响应式下易错位
.desc-fallback {
line-height: 1.5;
max-height: 4.5em;
overflow: hidden;
position: relative;
}
.desc-fallback::after {
content: "";
position: absolute;
bottom: 0;
right: 0;
padding-left: 20px;
background: linear-gradient(to right, transparent, #fff 50%);
}
行内元素加省略号：先转成 inline-block
span、a 这类默认 display: inline 的元素，直接加 text-overflow 是无效的——因为它们没有“块级容器”的概念。
- 必须先设
display: inline-block（或block）获得盒模型 - 再配
max-width（不能只用width，否则可能撑开父容器） - 常见于标签云、评论用户名等紧凑布局中
.tag {
display: inline-block;
max-width: 120px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
真正容易被忽略的是：**text-overflow 不是独立属性，它只是 overflow 的“附属特效”**。很多人调了半天样式，却忘了检查父容器是否设置了 overflow: visible（默认值），或者 flex 子项是否被压缩到 min-width: auto 导致宽度失效——这些都会让整个链路静默失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
