单行标题省略必须同时设置text-overflow: ellipsis、width（或max-width）、overflow: hidden、white-space: nowrap四个属性，缺一不可；多行省略首选-webkit-line-clamp，但需配套display: -webkit-box、-webkit-box-orient: vertical和整数行数，且不兼容Firefox和旧IE。
单行标题省略必须配齐四个 CSS 属性
只写 text-overflow: ellipsis 是没用的，浏览器根本不会渲染省略号。它必须和另外三个属性同时存在才生效：width（或 max-width）、overflow: hidden、white-space: nowrap。
常见错误包括：标题换行了、省略号不出现、整段文字被切掉但没符号。根本原因通常是漏了 width —— 没宽度，浏览器就不知道“从哪开始溢出”。
在卡片布局中，如果标题父容器用了 display: flex，子元素（比如 <h3>）还得加 min-width: 0，否则 flex 会默认拉伸内容，导致宽度计算失效。
-
white-space: nowrap不能换成pre或pre-wrap，否则换行逻辑错乱 - 百分比宽度在 flex 容器里可能不稳定，优先用
max-width: 200px这类明确值 - 避免给标题加
text-overflow: clip，它不显示省略号，仅截断
多行内容省略首选 -webkit-line-clamp，但有硬性配套要求
这个方案在 Chrome、Safari、Edge（新版）和主流移动端 WebView 中可用，但它不是标准属性，Firefox 和旧 IE 完全不支持。想让它工作，必须同时声明三样：
立即学习“前端免费学习笔记（深入）”；
display: -webkit-box + -webkit-box-orient: vertical + -webkit-line-clamp: 2（或 3）。漏掉任意一个，text-overflow: ellipsis 在多行下就不会触发。
-
-webkit-line-clamp的值只能是整数，不能是calc()、CSS 变量或表达式 - 高度不要用
height硬设，推荐用line-height: 1.5× 行数 + 少量余量（比如margin-bottom: 4px） - 内容里含
inline-block元素或图标时，容易破坏-webkit-box的流式布局，导致截断错位 - 中文标题带顿号、冒号或长英文单词时，
line-clamp: 2容易撑出第 3 行，建议留 1 行余量或改用 JS 截断
表格单元格或 Flex 子项里省略失效？先检查 display 模式
表格单元格（<td>）默认是 display: table-cell，它对 overflow 的响应很弱。直接套单行省略规则往往无效。
解决办法是显式覆盖显示模式：td { display: block; } 或更稳妥地用 td { display: inline-block; }，再配上 width 和其余三属性。
Flex 容器里的子项也类似：即使写了 white-space: nowrap，若没加 min-width: 0，flex 仍可能撑开容器宽度，让省略逻辑失效。
- 卡片内用
<figure><figcaption>结构时，<figcaption>默认是块级，需手动设display: block并加省略规则 - 不要依赖
text-overflow在inline元素上生效，先转成inline-block或block
需要全浏览器兼容？放弃 -webkit-line-clamp，改用伪元素遮罩
当项目必须跑在 Firefox 或老版桌面浏览器上，-webkit-line-clamp 就得彻底放弃。替代方案是用 ::after 渐变遮罩模拟省略效果，原理是“视觉盖住末尾”，不依赖真实截断。
关键点在于：position: relative 必须设在容器上，::after 才能精确定位；height 要严格等于 line-height × 行数；content: "\2026" 确保省略号 Unicode 渲染一致。
- 该方案无法响应字体缩放，若页面支持辅助功能「放大文字」，需监听
font-size变更并重算height -
line-height建议用无单位数值（如1.4），避免与px/em混用引发计算偏差 - 纯 CSS 方案在动态内容（如用户评论）场景下精度有限，真要可靠，还是得走 JS 字符串截断
min-width: 0 或 display: block。 
