Flex容器内带标题/图文/页脚的Div高度适配及多行文本溢出省略问题

嘿，这个问题我之前也踩过坑！Flex等高布局加上多行文本溢出省略，确实需要一点嵌套flex的技巧来搞定，我给你一步步拆解解决方案：

核心思路 #

让#article本身成为垂直方向的flex容器，通过flex属性分配标题、内容区、页脚的空间，让内容区自动填充剩余高度，再用多行省略处理文本溢出，同时保证页脚固定在容器底部。

1. 调整HTML结构（确保层级清晰） #

首先确认你的#article内部结构包含标题、内容区、页脚三个部分，比如：

<div class="flex-container">
  <div id="article">
    <h3 class="article-title">我的文章标题</h3>
    <div class="article-content">
      <img src="article-image.jpg" alt="文章配图">
      <p>这里是超级长的文本内容，可能包含好几段，需要在固定高度内显示并在末尾添加省略号，不会因为内容太长而撑破整个#article容器...</p>
    </div>
    <footer class="article-footer">文章底部信息</footer>
  </div>
  <!-- 其他需要等高的flex子元素 -->
  <div class="flex-item">其他内容区块</div>
</div>

2. 关键CSS设置 #

/* 父flex容器：让所有子元素默认等高 */
.flex-container {
  display: flex;
  gap: 1.5rem; /* 可选，子元素之间的间距 */
  padding: 1rem;
}

/* #article本身设置为垂直flex容器，继承父容器的等高 */
#article {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 2px solid #ddd; /* 你的边框样式 */
}

/* 标题：固定高度，不占用额外空间 */
.article-title {
  margin: 1rem;
  font-size: 1.2rem;
}

/* 内容区：自动填充标题和页脚之外的剩余空间 */
.article-content {
  flex: 1; /* 核心：占据剩余所有可用高度 */
  overflow: hidden; /* 隐藏超出容器的内容 */
  margin: 0 1rem;
}

/* 多行文本溢出省略：无需设置white-space: nowrap */
.article-content p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4; /* 这里设置你想要显示的行数 */
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.5; /* 可选，调整行高让布局更美观 */
}

/* 页脚：固定在容器底部 */
.article-footer {
  padding: 1rem;
  background-color: #f8f8f8;
  border-top: 1px solid #eee;
}

/* 其他flex子元素：确保和#article等高 */
.flex-item {
  border: 2px solid #ddd;
  padding: 1rem;
}

关键细节解释 #

• 父flex容器：display: flex会让所有直接子元素默认拥有相同高度，这是实现等高的基础。
• #article的垂直flex布局：flex-direction: column让内部元素垂直排列，height: 100%确保它和其他flex子元素高度一致。
• 内容区的flex:1：这个属性让内容区自动填充标题和页脚之外的所有剩余空间，不管文本多长，都不会撑破容器，超出的部分会被overflow: hidden隐藏。
• 多行文本省略：-webkit-line-clamp是实现多行省略的核心，配合-webkit-box和-webkit-box-orient: vertical，不需要设置white-space: nowrap，完美支持多行文本的溢出省略效果。

这样设置后，你的#article会和其他flex子元素保持相同高度，文本在内容区内自动省略，页脚也会紧紧贴合#article的底部边框，不会被长文本顶出去啦！

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