单行文字溢出显示省略号需同时设置 white-space: nowrap、overflow: hidden 和 text-overflow: ellipsis；多行则需 -webkit-box 相关属性及 max-height 配合，且 flex 场景下须加 min-width: 0。
单行文字溢出显示省略号必须同时设置三个 CSS 属性
只写 text-overflow: ellipsis 是没用的，浏览器根本不会触发省略逻辑。它只是“告诉浏览器：真要截断，就用省略号”，但前提是得先让文字真正溢出并被隐藏。
必须配合以下三者缺一不可：
-
white-space: nowrap—— 禁止换行，让文字强行保持单行 -
overflow: hidden—— 隐藏超出容器的部分 -
text-overflow: ellipsis—— 指定溢出时用省略号替代
div {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}多行文字溢出加省略号不能只靠 text-overflow
text-overflow: ellipsis 原生只支持单行。想实现两行、三行甚至任意行数的截断+省略，得用 WebKit 私有属性 -webkit-line-clamp，且必须配合 Flex 或 Block 布局才能生效。
常见失效原因：忘了设 display: -webkit-box，或没配 -webkit-box-orient: vertical。
立即学习“前端免费学习笔记（深入）”；
p {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /* 显示 3 行 */
overflow: hidden;
}注意：-webkit-line-clamp 在 Firefox 和部分旧版 Edge 中不支持，如需兼容，得用 JS 计算行高 + 截断字符串，或服务端预处理。
line-height 影响多行省略的准确性
当容器高度固定（比如 height: 60px），而 line-height: 24px，理论上最多容下 2 行（48px），但第 3 行可能因字体下沉或 padding 溢出一点点，导致 -webkit-line-clamp 渲染异常——要么多出半行，要么提前截断。
稳妥做法是：
- 用
max-height替代height，例如max-height: calc(24px * 3) - 确保父容器没有
padding或border干扰行高计算 - 字体尽量用无衬线体（如
system-ui），避免某些中文字体 baseline 不一致
Flex 容器里文字省略失效的典型场景
在 display: flex 的父容器中，子元素默认不收缩（flex-shrink: 1 但文字本身不受控），即使写了 text-overflow，也可能因为父容器没设 min-width: 0 或子项没设 flex: 1，导致宽度未被约束而撑开容器。
修复关键点：
- 给需要省略的子元素加
min-width: 0（防止 flex item 默认最小宽度为内容宽） - 加上
flex: 1或明确的width，让宽度可被限制 - 再叠加单行三件套或
-webkit-line-clamp
漏掉 min-width: 0 是最常被忽略的一环，尤其在卡片列表、表格单元格等 flex 场景中。
