如何为固定高度容器中未知行数的文本设置垂直溢出省略号

利用Flex布局分配容器空间，让前两个标题和第一个段落占据自身高度，第二个段落自动填充剩余空间，结合WebKit多行文本截断属性实现自适应行数的省略号效果，完全适配WeasyPrint的无JS环境。

HTML结构 #

<div class="fixed-container">
  <h2 class="title">标题1</h2>
  <p class="para-first">第一个段落内容，长度可变，会完整显示所有内容</p>
  <h3 class="subtitle">标题2</h3>
  <div class="para-wrapper">
    <p class="para-second">第二个段落内容，过长时会在容器剩余空间末尾自动显示省略号...</p>
  </div>
</div>

CSS样式 #

.fixed-container {
  /* 固定容器尺寸，按需调整 */
  width: 300px;
  height: 400px;
  border: 1px solid #ccc;
  /* 核心：垂直方向Flex布局 */
  display: flex;
  flex-direction: column;
  padding: 16px;
  box-sizing: border-box;
}

.title, .subtitle, .para-first {
  /* 前三个元素不被压缩，保留自身高度 */
  flex-shrink: 0;
  margin: 0 0 12px 0;
}

.para-wrapper {
  /* 填充容器剩余所有可用空间 */
  flex-grow: 1;
  overflow: hidden;
}

.para-second {
  margin: 0;
  /* 自适应行数截断：设置超大line-clamp值以匹配剩余空间 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 999;
  overflow: hidden;
  text-overflow: ellipsis;
}

关键逻辑说明 #

1. Flex空间分配：容器设为垂直Flex布局，标题和第一个段落通过flex-shrink: 0确保自身高度不被压缩，完整显示内容。
2. 剩余空间填充：第二个段落的外层容器para-wrapper用flex-grow: 1占据容器所有剩余空间，overflow: hidden隐藏超出部分。
3. 自适应截断：段落文本用WebKit多行截断属性，-webkit-line-clamp: 999允许文本显示尽可能多的行数（直到填满剩余空间），超出时自动追加省略号。

WeasyPrint原生支持上述WebKit截断属性，无需JavaScript即可在PDF生成时正常生效。

内容的提问来源于stack exchange，提问作者Timothy James