怎么在CSS中使用line-clamp截断多行文本且不溢出-css教程-PHP中文网

-webkit-line-clamp 必须与 display: -webkit-box、-webkit-box-orient: vertical、overflow: hidden 联用才生效；漏任一属性或上下文不匹配（如非block元素、无高度约束、flex直接套用）均导致截断失效。

怎么在css中使用line-clamp截断多行文本且不溢出

line-clamp 必须配合 display: -webkit-box 才生效

直接写 -webkit-line-clamp: 2 是没用的，浏览器会忽略。它只在 display: -webkit-box + -webkit-box-orient: vertical 的组合下起作用。这是硬性前提，不是可选优化。

常见错误是只加了 -webkit-line-clamp，却忘了改 display，结果文本照常撑开容器、完全不截断。

必须写全这三句：display: -webkit-box、-webkit-box-orient: vertical、-webkit-line-clamp: N
如果父容器用了 flex 或 grid，子元素再设 -webkit-box 不冲突，但要注意 align-items 可能影响垂直居中表现
不要给容器设固定 height，否则和 line-clamp 叠加会导致文字被切掉半行

max-height: none 是防止双重截断的关键

很多人为了兼容老浏览器，会先写一层 max-height: calc(1.5em * 3)，再用 @supports 开启 line-clamp。但如果忘记在 @supports 块里重置 max-height: none，WebKit 浏览器会先按 max-height 截一次，再按 line-clamp 截一次，最终显示行数少于预期（比如设了 3 行，实际只显示 2 行半）。

正确做法是在支持 line-clamp 的条件下，显式覆盖掉高度限制：

.clamp {
  line-height: 1.5em;
  max-height: calc(1.5em * 3);
  overflow: hidden;
}
@supports (-webkit-line-clamp: 1) {
  .clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    max-height: none; /* 这句不能少 */
  }
}