.text-truncate仅支持单行截断，因其依赖white-space: nowrap；多行截断必须用-webkit-line-clamp，且需同时满足display: -webkit-box、-webkit-box-orient: vertical、-webkit-line-clamp、overflow: hidden四条件。
不能靠 .text-truncate，它只认单行；多行截断必须手动组合 -webkit-line-clamp，且四条规则缺一不可。
为什么 .text-truncate 加在标题上没反应？
它本质是 white-space: nowrap + overflow: hidden + text-overflow: ellipsis 的封装——white-space: nowrap 直接锁死单行逻辑，和多行截断互斥。哪怕你给 <h2></h2> 或 <div> 加了这个类，只要内容换行了，省略号就永远不会出现。
<ul>
<li>浏览器会按 CSS 层叠规则丢弃冲突声明，比如你再加 <code>-webkit-line-clamp: 2，white-space: nowrap 会让文本压成一行，-webkit-line-clamp 失效
.text-truncate，结果因父容器未设 min-width: 0 或宽度约束，整个截断链路崩掉用 -webkit-line-clamp 实现 2 行/3 行精确截断
这是目前唯一能在 Chrome、Safari（17+）、Edge 中稳定显示省略号的原生方案，但必须同时满足四个条件：
-
display: -webkit-box—— 启用 WebKit 盒模型（不能用flex或block） -
-webkit-box-orient: vertical—— 告诉盒子垂直堆叠子行 -
-webkit-line-clamp: 2（或3）—— 真正控制行数的开关，值必须为整数 -
overflow: hidden—— 隐藏超出部分，否则省略号不触发
示例写法（适用于 <h3></h3> 或 <div>）：<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill11112" title="CSS工具箱(专业版)"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20e352aa140.jpg" alt="CSS工具箱(专业版)" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill11112" title="CSS工具箱(专业版)">CSS工具箱(专业版)</a>
<p>全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。</p>
</div>
<a href="/xiazai/skill11112" title="CSS工具箱(专业版)" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<pre class='brush:php;toolbar:false;'>.title-clamp-2 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}</pre>
<p>注意：<code>height 不能设固定值（如 height: 48px），否则可能截断不自然；宽度需由父容器提供约束（比如 max-width: 300px 或 flex 下的 flex-basis）。
标题在表格 <th> 里怎么截断？
<p>表格单元格有特殊渲染逻辑：<code><th> 默认是 <code>display: table-cell，不响应 -webkit-box，直接加 -webkit-line-clamp 无效。
- 先确保表格用了
table-layout: fixed（否则列宽由内容撑开，截断无从谈起）
- 给
<th> 设 <code>width 或 max-width（比如 style="max-width: 180px;"）
- 再叠加
white-space: nowrap + overflow: hidden + text-overflow: ellipsis —— 这是单行方案，也是表格里最可控的做法
- 若坚持要多行，得把
<th> 包一层 <code><div>，再对这个 <code><div> 应用 <code>-webkit-line-clamp 类，否则样式被表格渲染机制吞掉
Firefox 不支持 -webkit-line-clamp 怎么办？
它确实不认，且没有等效标准属性。纯 CSS 场景下只有两个务实选择：
- 接受 Firefox 下显示完整内容（多数业务场景可接受，用户滚动即可看到全貌）
- 用
line-height × 行数 计算高度 + overflow: hidden 实现“无省略号截断”：比如 line-height: 1.5rem，想卡 2 行就设 height: 3rem，不加 text-overflow，靠视觉裁剪
真正跨浏览器的多行省略号，目前仍需 JS 辅助（如监听 DOM 渲染后计算行高并手动插入 …），但复杂度陡增，多数项目没必要。
table-layout: fixed（否则列宽由内容撑开，截断无从谈起）<th> 设 <code>width 或 max-width（比如 style="max-width: 180px;"）
white-space: nowrap + overflow: hidden + text-overflow: ellipsis —— 这是单行方案，也是表格里最可控的做法<th> 包一层 <code><div>，再对这个 <code><div> 应用 <code>-webkit-line-clamp 类，否则样式被表格渲染机制吞掉
Firefox 不支持 -webkit-line-clamp 怎么办？
它确实不认，且没有等效标准属性。纯 CSS 场景下只有两个务实选择：
- 接受 Firefox 下显示完整内容（多数业务场景可接受，用户滚动即可看到全貌）
- 用
line-height× 行数 计算高度 +overflow: hidden实现“无省略号截断”：比如line-height: 1.5rem，想卡 2 行就设height: 3rem，不加text-overflow，靠视觉裁剪
真正跨浏览器的多行省略号，目前仍需 JS 辅助（如监听 DOM 渲染后计算行高并手动插入 …），但复杂度陡增，多数项目没必要。
