如何使application div不受文本长度影响保持固定尺寸且响应式？

核心思路 #

要让.application容器无论内部文本长短都保持统一且响应式的尺寸，需要从容器尺寸约束和内部文本溢出控制两方面入手：

具体CSS修改方案 #

假设你的EJS结构是类似这样的列表：

<div class="applications-list">
  <% applications.forEach(app => { %>
    <div class="application">
      <div class="application-text"><%= app.content %></div>
      <button class="action-btn">处理申请</button>
    </div>
  <% }) %>
</div>

方案1：Flex布局实现响应式列表

/* 列表容器：自动换行的flex布局 */
.applications-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1rem;
}

/* 单个申请容器：固定尺寸范围+稳定高度 */
.application {
  /* 响应式宽度：最小300px，屏幕足够时自动填充，最大限制400px */
  flex: 1 1 300px;
  max-width: 400px;
  /* 最小高度保证内容短时容器不收缩 */
  min-height: 200px;
  padding: 1.5rem;
  border: 1px solid #eee;
  border-radius: 8px;
  /* 内部元素垂直分布，让文本区域填充剩余空间 */
  display: flex;
  flex-direction: column;
}

/* 文本区域：限制溢出，不撑爆容器 */
.application-text {
  flex: 1; /* 占据容器剩余空间，按钮等元素固定在底部 */
  overflow: hidden;
  /* 多行文本溢出显示省略号（最多6行） */
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  /* 如果需要允许滚动，替换上面三行为：overflow-y: auto; */
}

方案2：Grid布局实现响应式列表

如果你更习惯Grid布局，也可以用下面的代码：

.applications-list {
  display: grid;
  /* 自动填充列，每列最小300px，最大占满一行 */
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
  padding: 1rem;
}

.application {
  min-height: 200px;
  padding: 1.5rem;
  border: 1px solid #eee;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
}

.application-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
}

关键说明 #

1. 容器尺寸约束：通过flex: 1 1 300px或Grid的minmax(300px, 1fr)，保证容器在不同屏幕下有合适的宽度范围，不会过宽或过窄；min-height确保内容短时容器高度统一。
2. 文本溢出控制：给.application-text设置overflow: hidden配合多行省略号（或滚动），彻底避免长文本撑爆容器。

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