text-overflow: ellipsis 仅对单行生效，需同时满足 overflow: hidden、white-space: nowrap 和明确 width；多行截断须用 -webkit-line-clamp 配合 display: -webkit-box 等属性。
text-overflow: ellipsis 只对单行生效？
没错，text-overflow: ellipsis 默认只在单行文本截断时起作用。它依赖三个前提同时成立：overflow: hidden、white-space: nowrap、width（或 max-width）有明确限制。缺一个，省略号就消失。
常见错误现象：div 里文字明明超了容器，却换行显示、不出现省略号——大概率是漏了 white-space: nowrap，或者用了 flex 布局但没设 min-width: 0 导致宽度计算失效。
- 使用场景：标题栏、表格列、卡片摘要等需要严格控高的单行展示区
- 注意
display: flex容器里的子元素：必须加min-width: 0，否则width限制可能被忽略 - IE11 支持该组合，但 Safari 旧版本对
flex + ellipsis兼容性差，建议加overflow: hidden到子元素而非父容器
多行文本省略用 -webkit-line-clamp
-webkit-line-clamp 是目前唯一广泛支持的多行截断方案，但它不是标准 CSS，而是 WebKit 内核私有属性，需配合 display: -webkit-box 使用。别试图用 text-overflow 直接搞定三行省略——它做不到。
常见错误现象：设置了 -webkit-line-clamp: 2 却没效果——大概率是忘了写 display: -webkit-box 和 -webkit-box-orient: vertical，或者父容器没设 overflow: hidden。
- 必须成套使用：
display: -webkit-box→-webkit-box-orient: vertical→-webkit-line-clamp: N→overflow: hidden - 不能和
height或max-height混用：一旦设了固定高度，-webkit-line-clamp就失效，优先用line-height × N估算容器高度 - Firefox 完全不支持，如需兼容，得用 JS 方案（比如截取字符数+测高），但会增加重排开销
响应式截断：根据屏幕宽度切换单行/多行
用媒体查询切换截断逻辑最稳妥，别指望一个 CSS 规则自动适配所有设备。关键点在于：不同断点下，line-clamp 值、容器宽度、字体大小都可能变化，必须显式控制。
常见错误现象：小屏下三行省略正常，大屏变两行后文字突然撑开——因为没在大屏媒体查询里重置 -webkit-line-clamp，或者忘了清除旧的 white-space: nowrap。
- 单行 → 多行切换时，要同时改掉
white-space（从nowrap改回normal），否则多行逻辑直接被锁死 - 字体缩放（如用户设置系统字号放大）会影响行高计算，
line-clamp的行数可能不准，建议搭配clamp()控制字体大小范围 - 避免嵌套媒体查询：把单行规则写在默认样式，多行规则用
@media (min-width: 768px)覆盖，更易维护
纯 CSS 截断的边界问题
CSS 截断本质是视觉欺骗，它不改变 DOM 结构，也不触发事件。这意味着：复制粘贴时会复制全部原文，无障碍阅读器仍读出完整文本，搜索关键词也匹配原始内容——这些不是 bug，是设计使然。
容易被忽略的地方：当文本含中文、英文、数字混排时，-webkit-line-clamp 可能在标点处断开（比如“详情…”变成“详…”，中间缺字），这是因为浏览器按字符盒（inline box）截断，而非语义分词。
- 无法精确控制省略号前最后一个字：CSS 没提供类似“保留末尾两个字”的能力
- 动态内容（如 Vue/React 绑定的变量）更新后，截断状态不会自动重算，需手动触发重排（例如改个
key或ref） - 如果截断后还要加“展开”按钮，别用
click直接切line-clamp，先确保容器高度可变，否则文字会被裁掉一部分
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
