如何用Flexbox在CSS中实现文本垂直截断（带省略号）

一、布局调整：让.excerpt占据父容器剩余垂直空间 #

要实现子元素垂直排列且.excerpt自动填充剩余空间，核心是利用Flexbox的flex-grow属性，逐层设置Flex布局：

.post-card-container {
  display: flex;
  flex-direction: column;
  height: 600px; /* 保留原固定高度 */
}

.content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.post-data {
  flex: 1;
  display: flex;
  flex-direction: column;
  /* 移除原内联的flex: 0 0 50%，改为flex:1让它占满.content的剩余空间 */
}

.excerpt {
  flex: 1; /* 关键：让该元素占据.post-data内的剩余垂直空间 */
  overflow: hidden; /* 为文本溢出截断做准备 */
}

二、文本溢出截断：实现多行文本省略号 #

针对.excerpt内的文本，使用CSS的webkit多行截断方案，结合容器的动态高度，文本会自动填充容器并在溢出时显示省略号：

.excerpt {
  flex: 1;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  /* 无需指定固定行数，容器高度由Flex布局决定，文本会自动适配并截断 */
}

修改后的完整代码示例 #

<div class="post-card-container" style="height: 600px;">
  <div class="content">
    <div class="media">
      <a href="{{url}}" tabindex="-1">
        Media zone
      </a>
      <hr>
    </div>
    <div class="post-data">
      <ul class="tags" aria-label="List of tags">
        <li class="tag-container hidden">
          <div class="tag-dot"></div>
          <span class="tag-name">Security</span>
        </li>
      </ul>
      <div class="title">
        <h2 title="{{title}}">Hello World this is my title and it is so big so </h2>
      </div>
      <p class="excerpt">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae, unde. Ea, pariatur, vitae. Nemo doloremque iure non quod id ducimus, doloribus voluptate qui vero, assumenda vitae repellendus odit nam labore a rerum. Quasi blanditiis nam facere dolorem numquam doloremque beatae illo amet mollitia tempora perspiciatis reiciendis eaque repellendus aliquam rerum laudantium suscipit, culpa dolore ratione voluptatum! Assumenda deleniti cumque error eveniet pariatur, esse, quam ducimus consequatur perspiciatis adipisci doloribus rerum, laboriosam repudiandae tempore quis? Cum iusto tenetur perspiciatis quidem, nihil quod, repudiandae sed, inventore doloribus nam sapiente. Cum dolor saepe velit nulla, quos amet, nemo et. Tempora assumenda nulla repellat.
      </p>
      <div class="infos">
        <div class="authors-pic">
          <div class="date">
            <span>Date</span>
          </div>
        </div>
        <div class="read-more">
          <div class="read-more">
            <a href="{{url}}" class="read">Read</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script src="../assets/js/custom-tags.js"></script>

<style>
.post-card-container {
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.post-data {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem; /* 可选：给子元素添加间距，优化布局 */
}

.excerpt {
  flex: 1;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  margin: 0; /* 移除默认p标签的margin，避免布局偏差 */
}

.title h2 {
  margin: 0; /* 移除h2默认margin */
}
</style>

关键说明 #

• 逐层设置display: flex; flex-direction: column，确保垂直布局的层级关系正确，让Flexbox能准确计算剩余空间。
• .excerpt的flex:1是核心，它会自动填充父容器中除其他子元素外的剩余高度。
• 多行文本截断使用webkit前缀属性，是目前浏览器支持较好的方案，文本会根据容器高度自动调整显示行数并在溢出时显示省略号。

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