单行截断需text-overflow: ellipsis配合white-space: nowrap和overflow: hidden及明确宽度；多行截断目前仅-webkit-line-clamp实用，但firefox/ie不支持，无纯css通解，兼容场景需js或服务端兜底。
单行截断用 text-overflow: ellipsis 就够了，但必须配 white-space: nowrap 和 overflow: hidden；多行响应式截断目前只能靠 -webkit-line-clamp，Firefox 和旧版 IE 不支持，没有纯 CSS 通解。
单行文本截断：为什么 text-overflow: ellipsis 常常不生效
不是属性写错了，而是缺了前提条件。它只在「文本被强制压成一行 + 溢出被隐藏」时才触发。
-
white-space: nowrap必须存在，否则文本自动换行，text-overflow根本不检测“溢出” -
overflow: hidden必须显式声明，否则超出部分照常显示，浏览器没理由去截断 - 容器得有明确宽度约束：
width或max-width（在 flex/grid 里还要加min-width: 0防止拉伸） - 别在
display: inline元素上直接用——它不接受width，得先改成inline-block或block
示例：
.title {
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
}
多行响应式截断：为什么 -webkit-line-clamp 是当前唯一实用方案
它能根据容器宽度自动调整截断位置，且省略号始终落在最后一行末尾，视觉准确。但它本质是 WebKit 私有属性，Chrome、Safari、Edge（Chromium 内核）可用，Firefox 和 IE 完全无视。
- 必须搭配
display: -webkit-box和-webkit-box-orient: vertical才生效 -
-webkit-line-clamp: 2表示最多显示 2 行，超出即截断，和line-height强相关（比如line-height: 1.5时，2 行实际高度约 3em） - 响应式场景下，建议用
rem或em设定容器max-height，再配合媒体查询微调-webkit-line-clamp值 - 不要和
flex或grid的align-items混用，容易导致-webkit-box布局错乱
示例：
.desc {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
line-height: 1.4;
max-height: 4.2em; /* 3 × 1.4 */
}
兼容性兜底：什么时候该放弃纯 CSS 多行截断
如果你的项目必须支持 Firefox 或需要精确控制截断字符数（比如限制 80 字符而非 3 行），CSS 就到头了。这时候要切到 JS。
- 用
element.textContent获取原始文本，按字符或字数手动截取，再拼接'…' - 注意中英文混排时，一个中文字符占位 ≈ 两个英文字符，单纯按
.length截可能偏短 - 服务端提前截断更稳定（比如 API 返回时就带
summary: "xxx…"），避免前端反复计算 - 别用
@supports (-webkit-line-clamp: 1)做降级——它在 Safari 中返回 true，但在 Firefox 中不报错也不生效，无法可靠判断是否“真正支持”
真正难的不是写出那几行 CSS，而是想清楚：这个字段用户是否真的需要看到完整内容？要不要加「展开」按钮？有没有必要为 2% 的不支持用户增加 JS 负担？这些比 -webkit-line-clamp 的兼容性更值得花时间权衡。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
