如何在HTML中实现可自动换行的键值对表格布局？

表格布局无法实现垂直空间不足时自动拆分为多列的需求，我们可以使用语义化的<dl>定义列表配合CSS多列布局来实现，同时满足标签右对齐、值左对齐、文本截断的要求：

实现代码 #

HTML #

<div class="info-container">
  <dl>
    <dt>拍摄日期:</dt>
    <dd>指定拍摄日期和时间</dd>
    <dt>标签:</dt>
    <dd>添加标签</dd>
    <dt>评分:</dt>
    <dd>★★★✰✰</dd>
    <dt>尺寸:</dt>
    <dd>653 × 640</dd>
    <dt>大小:</dt>
    <dd>115 KB</dd>
    <dt>标题:</dt>
    <dd>OLYMPUS DIGITAL CAMERA</dd>
    <dt>作者:</dt>
    <dd>添加作者</dd>
    <dt>评论:</dt>
    <dd>添加评论</dd>
    <dt>相机厂商:</dt>
    <dd>OLYMPUS CORPORATION</dd>
    <dt>相机型号:</dt>
    <dd>C8080WZ</dd>
    <dt>主题:</dt>
    <dd>OLYMPUS DIGITAL DAMERA</dd>
    <dt>光圈值:</dt>
    <dd>f/3.5</dd>
    <dt>曝光时间:</dt>
    <dd>1/1250 秒</dd>
    <dt>ISO感光度:</dt>
    <dd>ISO-100</dd>
    <dt>曝光补偿:</dt>
    <dd>0 级</dd>
    <dt>焦距:</dt>
    <dd>36 mm</dd>
    <dt>最大光圈:</dt>
    <dd>3.5</dd>
    <dt>测光模式:</dt>
    <dd>矩阵测光</dd>
    <dt>闪光灯模式:</dt>
    <dd>无闪光，自动</dd>
    <dt>创建日期:</dt>
    <dd>2021/4/10 11∶25 上午</dd>
    <dt>修改日期:</dt>
    <dd>2008/8/19 18∶53 下午</dd>
  </dl>
</div>

CSS #

body {
  background: rgb(245, 249, 253);
  background: linear-gradient(90deg, rgba(245, 249, 253, 1) 0%, rgba(236, 244, 252, 1) 100%);
  font-family: "Segoe UI", sans-serif;
  padding: 20px;
}

.info-container {
  /* 控制列的最小宽度，容器空间不足时自动新增列 */
  columns: 200px auto;
  gap: 20px;
}

dl {
  margin: 0;
  display: grid;
  /* 定义两列，标签列自适应宽度，值列占剩余空间 */
  grid-template-columns: max-content auto;
  gap: 8px 12px;
  break-inside: avoid; /* 避免单个键值对被拆分到两列 */
}

dt {
  text-align: right;
  color: GrayText;
  white-space: nowrap;
}

dd {
  margin: 0;
  /* 文本过长时截断并显示省略号 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

关键特性说明 #

• 自动列拆分：通过columns属性设置列的最小宽度，当容器垂直空间不足或内容过长时，自动将剩余内容排列到新列。
• 对齐控制：使用Grid布局定义<dl>的两列结构，<dt>（标签）右对齐，<dd>（值）左对齐，同时保证标签宽度自适应内容。
• 文本截断：给<dd>设置white-space: nowrap、overflow: hidden和text-overflow: ellipsis，实现过长文本的省略显示。
• 避免内容拆分：break-inside: avoid确保单个键值对不会被拆分到不同列中，保持布局完整性。

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