line-clamp 不能直接用于 元素，因其默认 display: list-item 不满足块格式化上下文要求；必须包裹独立 并配合 display: -webkit-box、-webkit-box-orient: vertical、-webkit-line-clamp 及 overflow: hidden 才能生效。
line-clamp 不能直接用在 <ul></ul> 或 <li> 上——这是最常踩的坑。它只对块级、单行内联元素（且需配合特定 display 值）生效，列表项默认是 display: list-item，不满足前提。
为什么 line-clamp 对 <li> 直接写无效
根本原因是 line-clamp 是一个「显示控制」属性，依赖于文本容器处于「块格式化上下文」+「无换行干扰」的状态。而 <li> 默认有 list-style 和 margin，且未显式设置 display: block 和 overflow: hidden 时，浏览器不会触发截断逻辑。
-
line-clamp必须配合display: -webkit-box（或display: flex+ 其他限制）和-webkit-box-orient: vertical - 父容器必须设
overflow: hidden，否则截断不生效 - 不能用于
float、inline或table等 display 类型的元素 - 原生支持仅限 WebKit 内核（Chrome/Safari/Edge），Firefox 需用
display: -webkit-box+ 回退方案
正确写法：给 <li> 内的文本容器套一层 <div><p>不要试图在 <code><li> 上直接加 line-clamp，而是把要截断的文本包进一个 <div>，再对这个 <code><div> 应用样式：<pre class='brush:php;toolbar:false;'><ul>
<li><div class="clamp">这是一段很长的描述文字，超出三行就该被隐藏</div></li>
</ul></pre><p>对应 CSS：</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>
<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><pre class='brush:php;toolbar:false;'>.clamp {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
/* 可选：避免文字被截断得过于突兀 */
text-overflow: ellipsis;
}</pre><h3>兼容性与回退：Firefox 下怎么让 <code>line-clamp 生效
Firefox 从 68+ 开始支持原生 line-clamp，但前提是必须用 display: block + overflow: hidden + text-overflow: ellipsis 组合，并且只对单行有效；多行仍需依赖 WebKit 方案。所以稳妥做法仍是保留 -webkit- 前缀，并接受 Firefox 中多行截断依赖 JS 回退（如 clamp.js）或放弃。
- 若只要单行截断：可用
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;，全浏览器兼容 - 若必须多行且要兼容 Firefox：用
display: -webkit-box写法，Firefox 会忽略但不报错，视觉上表现为“不截断”，而非崩溃 - 注意：Safari 17+ 对
-webkit-line-clamp的行为有微调，比如在 flex 子项中可能失效，建议始终包裹独立<div><p>真正容易被忽略的是：即使样式写对了，如果父容器（比如 <code><li>）设置了height或max-height，反而会干扰-webkit-box的行高计算，导致截断错位。留白空间、font-size 变化、line-height 不一致，都可能让第 3 行只显示半行字——这时候得靠line-height和padding微调，而不是改line-clamp数值。
