CSS 如何实现不定行数文本截断？

Question

CSS 如何实现不定行数文本截断？

仓乃文 · Accepted Answer

当需要根据剩余空间动态决定文本显示行数时，可以结合 flex 布局和 shapes 布局实现不定行数截断，突破 -webkit-line-clamp 固定行数的限制。

```css
.container {
  display: flex;
  flex-direction: column;
  height: 72px;
  overflow: hidden;
}

.content {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.content::before {
  content: "...";
  float: right;
  height: 100%;
  display: flex;
  align-items: flex-end;
  shape-outside: inset(calc(100% - 1.5em) 0 0);
}

.content::after {
  content: ";
  position: absolute;
  width: 999vh;
  height: 999vh;
  background: #fff;
  box-shadow: -2em 2em #fff;
}
```

补充说明：
- flex: 1 让内容自适应剩余空间，伪元素浮动实现右下角省略号环绕效果
- shape-outside: inset() 控制文字环绕区域
- ::after 伪元素用大色块遮住省略号（CSS 障眼法），box-shadow 偏移补上极端情况遮挡不住的区域
- 适合标题 + 内容总行数固定的场景