text-overflow: ellipsis生效需同时满足四个条件：width或max-width为明确值、overflow: hidden、white-space: nowrap、元素为块级（如display: block），缺一不可；flex中还需加min-width: 0。
text-overflow: ellipsis 不是加了就出省略号的开关，它只在文本被真实截断时才亮起。漏掉任意一个前提条件，省略号就永远不会出现。
单行省略必须配齐四条 CSS 规则
缺一不可，顺序无关，但少一条都不行：
-
width或max-width：必须是明确值（如200px、80%）；flex: 1或100%在 flex 容器中可能不触发截断 -
overflow: hidden：不能是visible（默认）、auto（滚动行为不稳定）或scroll（会显示滚动条） -
white-space: nowrap：最常被跳过；normal、pre-wrap下完全无效 - 元素需为块级：默认
span是inline，必须显式设为display: block或inline-block
Flex 容器里文字溢出失效的真正原因
子项默认 flex-shrink: 1，会主动压缩自身宽度来适应空间——文本根本没“溢出”，text-overflow 形同虚设。
- 给文字容器加
min-width: 0（触发 flex item 最小尺寸计算规则） - 或设
flex-shrink: 0，防止被压缩 - 若父容器用了
flex: 1，子项未设min-width: 0，哪怕其他条件全对，也会失效
表格单元格（<td>）里省略号总不生效
<p>表格单元格默认是 <code>display: table-cell，优先适应内容宽度，导致 overflow: hidden 失效。
- 给
<table> 加 <code>table-layout: fixed，让列宽由 <th>/</th>
<td> 的 <code>width 或 max-width 决定
- 给
<td> 加 <code>white-space: nowrap + overflow: hidden + text-overflow: ellipsis + max-width: 150px
- 漏掉
table-layout: fixed 是表格中省略号最常见的失效原因
多行省略只能靠 -webkit-line-clamp？
目前最轻量、可控性最高的方案确实是 display: -webkit-box + -webkit-line-clamp，但它不是“必须”，而是“权衡之后的实用选择”：
-
-webkit-line-clamp: 3 表示最多显示 3 行，超出部分裁剪并加省略号
- 必须配合
display: -webkit-box 和 -webkit-box-orient: vertical，否则无效
- Firefox 直到 v125 才实验性支持（需手动开启
layout.css.line-clamp.enabled），生产环境不能依赖
- 若内容含
<img> 等内联元素，要检查 vertical-align，避免行高错乱导致截断位置偏移
真正容易被忽略的是语义和可访问性：text-overflow: ellipsis 只改视觉，DOM 内容完整保留，屏幕阅读器仍读全部文本；关键字段如 ID、URL、错误码不该截断，服务端提前处理更可靠。
<table> 加 <code>table-layout: fixed，让列宽由 <th>/</th>
<td> 的 <code>width 或 max-width 决定
<td> 加 <code>white-space: nowrap + overflow: hidden + text-overflow: ellipsis + max-width: 150px
table-layout: fixed 是表格中省略号最常见的失效原因多行省略只能靠 -webkit-line-clamp？
目前最轻量、可控性最高的方案确实是 display: -webkit-box + -webkit-line-clamp，但它不是“必须”，而是“权衡之后的实用选择”：
-
-webkit-line-clamp: 3表示最多显示 3 行，超出部分裁剪并加省略号 - 必须配合
display: -webkit-box和-webkit-box-orient: vertical，否则无效 - Firefox 直到 v125 才实验性支持（需手动开启
layout.css.line-clamp.enabled），生产环境不能依赖 - 若内容含
<img>等内联元素，要检查vertical-align，避免行高错乱导致截断位置偏移
真正容易被忽略的是语义和可访问性：text-overflow: ellipsis 只改视觉，DOM 内容完整保留，屏幕阅读器仍读全部文本；关键字段如 ID、URL、错误码不该截断，服务端提前处理更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
