CSS如何限制多行文本显示行数_结合-webkit-line-clamp使用-css教程-PHP中文网

line-clamp仅WebKit内核支持，Firefox完全不识别；需display:-webkit-box、-webkit-box-orient:vertical和-webkit-line-clamp三者配合；失效主因是未设高度约束、flex布局干扰或内联元素破坏行盒计算；多行省略须伪元素模拟，iOS Safari存在渲染抖动。

css如何限制多行文本显示行数_结合-webkit-line-clamp使用

line-clamp只在WebKit内核生效，别指望Firefox原生支持

用 -webkit-line-clamp 截断多行文本，本质是 WebKit 的私有扩展，Chrome、Safari、Edge（Chromium版）能用，Firefox 完全不识别——它连 display: -webkit-box 都不解析，直接退化为完整显示。不是兼容性差，是压根没实现。

实操建议：

必须搭配 display: -webkit-box 和 -webkit-box-orient: vertical 才生效，三者缺一不可
Firefox 用户只能靠 JS 模拟（比如用 textContent + getClientRects() 数行高），或改用服务端截断 + 省略号
如果项目需强跨浏览器支持，优先考虑后端控制字符数，前端只做兜底

line-clamp失效的三个高频原因

写对了 CSS 却没截断？大概率掉进了这几个坑里：

height 或 max-height 没设，或者设得过大——-webkit-line-clamp 依赖容器高度“挤出”溢出，没约束就不起作用
父元素用了 flex 布局但没设 flex-shrink: 0 或 min-width: 0，导致子元素宽度撑开，换行逻辑错乱
文本内嵌了 <img>、<span></span> 等替换元素，或设置了 vertical-align，破坏了 -webkit-box 的行盒计算

简单验证：临时加 outline: 1px solid red 看容器是否真被限制住了高度。

line-clamp和overflow:hidden组合时，省略号可能不显示

text-overflow: ellipsis 在多行场景下不会自动生效——它只对单行 white-space: nowrap 有效。多行省略号必须靠伪元素手动拼接。

实操写法：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

div {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  position: relative;
}
div::after {
  content: "...";
  position: absolute;
  bottom: 0;
  right: 0;
  background: white; /* 覆盖最后一行末尾 */
  padding-left: 4px;
}

注意：::after 的 background 颜色必须和父容器背景一致，否则会漏出底层文字；若背景非纯色（如渐变/图片），此方案不可靠。