text-overflow: ellipsis必须配合white-space: nowrap、overflow: hidden和显式width（或max-width）三者才生效；多行省略需用-webkit-line-clamp等替代方案。
text-overflow: ellipsis 必须配合哪些 CSS 才生效
单独写 text-overflow: ellipsis 没用，浏览器直接忽略。它只是“截断后加省略号”的声明，不负责限制宽度或强制单行——这两件事得靠其他属性配合。
必须同时满足三个条件：
-
white-space: nowrap：禁止换行，让文字强行挤在一行 -
overflow: hidden：隐藏溢出部分（否则省略号不显示，文字会直接撑出容器） - 显式设置
width（或max-width），比如width: 200px或width: 100%；用flex/grid布局时，父容器需有明确尺寸约束，否则子元素 width: 100% 无效
Flex 容器里文字截断失效的典型原因
在 display: flex 的父容器中，子项默认是 flex-shrink: 1，会主动压缩自身宽度，导致 width 被忽略，text-overflow 失效。
解决方法很简单，但容易漏：
- 给需要截断的元素加
flex-shrink: 0（阻止它被压缩）+min-width: 0（修复 Chrome/Firefox 对 flex 子项的最小尺寸保护逻辑） - 或者更稳妥：用
overflow: hidden包一层内联容器（如<span></span>），把截断样式写在这一层，而不是直接写在 flex 子项上 - 避免对 flex 子项直接设
width: 100%—— 它在 flex 布局下语义模糊，行为不稳定
多行截断不能只靠 text-overflow
text-overflow: ellipsis 只支持单行。想实现两行、三行截断，CSS 原生方案只有 display: -webkit-box 这一条路，且仅限 WebKit 内核（Chrome/Safari）。
关键写法（以两行为例）：
.line-clamp-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
注意点：
- 必须有
height或max-height配合，否则可能截不全 - Firefox 不支持
-webkit-line-clamp，需降级为 JS 方案（如计算行高 + 截字符串）或接受不截断 - 如果内容含
<br>或块级子元素，该方案会失效 —— 它只对纯文本流有效
中文/英文混排时省略号位置异常怎么办
常见现象：末尾明明有空格或标点，省略号却卡在中间，比如 “项目进度…完成” 变成 “项目进…”。这是因为 text-overflow 截的是“渲染后像素长度”，不是字符数，而中英文字符宽度不同，浏览器断点位置难以预测。
缓解方法：
- 确保容器
font-family固定（避免系统字体替换导致宽度突变） - 用
ch单位代替px设width（如width: 20ch），对等宽字体更可控 - 极端场景可加
word-break: keep-all或overflow-wrap: anywhere微调断词逻辑，但会影响阅读体验，慎用
真正稳定的方式还是服务端或 JS 预截断——CSS 截断本质是视觉兜底，别把它当精确控制工具。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
