如何在CSS中使用line-clamp属性限制列表展示行数-css教程-PHP中文网

line-clamp 不能直接用于元素，因其默认 display: list-item 不满足块格式化上下文要求；必须包裹独立并配合 display: -webkit-box、-webkit-box-orient: vertical、-webkit-line-clamp 及 overflow: hidden 才能生效。

如何在css中使用line-clamp属性限制列表展示行数

line-clamp 不能直接用在

或

上——这是最常踩的坑。它只对块级、单行内联元素（且需配合特定 display 值）生效，列表项默认是 display: list-item，不满足前提。

为什么 `line-clamp` 对
直接写无效

根本原因是 line-clamp 是一个「显示控制」属性，依赖于文本容器处于「块格式化上下文」+「无换行干扰」的状态。而

默认有 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 + 回退方案

正确写法：给

内的文本容器套一层 不要试图在

 上直接加 line-clamp，而是把要截断的文本包进一个 ，再对这个  应用样式：

这是一段很长的描述文字，超出三行就该被隐藏

对应 CSS：

											
												
												
													CSS工具箱(专业版)
													全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。
												
												下载
												
											
										
.clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  /* 可选：避免文字被截断得过于突兀 */
  text-overflow: ellipsis;
}
兼容性与回退：Firefox 下怎么让 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 子项中可能失效，建议始终包裹独立 真正容易被忽略的是：即使样式写对了，如果父容器（比如 
）设置了 height 或 max-height，反而会干扰 -webkit-box 的行高计算，导致截断错位。留白空间、font-size 变化、line-height 不一致，都可能让第 3 行只显示半行字——这时候得靠 line-height 和 padding 微调，而不是改 line-clamp 数值。