卡片内元素对齐问题：长文本导致布局错乱的解决方法

我现在展示所有用户的预订信息，当设备需求这类文本较长时，当前布局会打乱对齐。希望修改后卡片能垂直扩展，且不影响其他字段。我试过把flex设为1，但更希望文本垂直换行而不是水平扩展。

现有代码 #

CSS 代码 #

.card {
  display: ruby-text;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 10px;
}

.card-column {
  font-weight: bold;
  width: 120px;
}

.card-value {
  text-align: justify;
}

HTML 代码 #

<div class="card">
  <div class="card-item">
    <div class="card-column">Booking ID:</div>
    <div class="card-value">{{ booking[0] }}</div>
  </div>
  <div class="card-item">
    <div class="card-column">Room:</div>
    <div class="card-value">{{ booking[1] }}</div>
  </div>
  <div class="card-item">
    <div class="card-column">User:</div>
    <div class="card-value">{{ booking[2] }}</div>
  </div>
  <div class="card-item">
    <div class="card-column">Date:</div>
    <div class="card-value">{{ booking[3] }}</div>
  </div>
  <div class="card-item">
    <div class="card-column">Time:</div>
    <div class="card-value">{{ booking[4] }}</div>
  </div>
  <div class="card-item">
    <div class="card-column">Attendance:</div>
    <div class="card-value">{{ booking[5] }}</div>
  </div>
  <div class="card-item">
    <div class="card-column">Equipment</div>
    <div class="card-value">{{ booking[6] }}</div>
  </div>
  <div class="card-item">
    <div class="card-column">Status:</div>
    <div class="card-value">{{ booking[7] }}</div>
  </div>
  <div class="card-item">
    <button onclick="updateBooking('{{ booking[0] }}')">Update</button>
    <button onclick="deleteBooking('{{ booking[0] }}')">Delete</button>
  </div>
</div>

解决方案 #

核心用Flex布局实现标签与内容的稳定对齐，同时让长文本自动换行，卡片垂直扩展：

修改后的CSS #

.card {
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 10px;
}

.card-item {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  align-items: flex-start; /* 内容换行时，标签与内容顶部对齐 */
}

.card-column {
  font-weight: bold;
  width: 120px;
  flex-shrink: 0; /* 固定标签宽度，不被内容挤压 */
}

.card-value {
  flex-grow: 1; /* 内容区占据剩余空间 */
  word-wrap: break-word; /* 强制长文本换行 */
  text-align: left; /* 替换justify避免不必要的间距 */
}

关键调整说明 #

1. 移除原代码中不适合布局的display: ruby-text属性
2. 给.card-item设置Flex布局，让标签和内容在同一行排列
3. .card-column添加flex-shrink: 0，确保所有标签宽度一致，不会被压缩
4. .card-value通过flex-grow: 1占据剩余空间，word-wrap: break-word实现文本垂直换行，卡片自动向下扩展，不影响其他字段布局

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