如何让 'dl' 内容自动换行，就像表格 'td' 换行？答案

【问题标题】：How can I make 'dl' content word wrap the way a table 'td' would wrap?如何让 'dl' 内容自动换行，就像表格 'td' 换行？
【发布时间】：2019-04-18 17:10:43
【问题描述】：

我尽量避免使用表格进行格式化。

在表格中，如果我的第二列中的一个单元格需要换行，它只会在该单元格内换行。当我尝试使用列表 (dl) 时，“第二列”(dd) 会包裹在整行下方。

dt {
  display: block;
  float: left;
  text-align: right;
  color: black;
  width: 150px;
}

dt::after {
  content: ":";
  padding-left: .5em;
  padding-right: .5em;
}

dd {
  display: block;
  color: blue;
}

<dl>
  <dt>System Type</dt>
  <dd>My System Type</dd>
  <dt>Manufacturer</dt>
  <dd>Very very very very very long second column</dd>
</dl>

输出截图：

【问题讨论】：

stackoverflow.com/questions/40762697
谢谢，但这个问题是关于多个值之间的换行符。我遇到的问题是内容换行的方式——第 2 行一直从左边开始（在 'dt' 值下）。

标签： html css word-wrap

【解决方案1】：

我认为您必须对第一列的宽度进行硬编码，这是我能够取得任何进展的唯一方法，但我认为这就是您正在寻找的。应得的全部功劳，我受到this answer 的启发，它使用了百分比。在这种情况下，如果您用像素对宽度进行硬编码，结果会更好，这样您的“列”之间的差距就不会像百分比那样扩大/缩小。

您必须调整 120px 的值以满足您的需要，这是提供的两个值看起来最好的值。

* {
    margin: 0;
}
dl {
    width: 100%;
}
dt {
    float: left;
    text-align: right;
    /* Hard code the width of the first column here */
    width: 120px;
}
dt::after {
    content: ":";
    padding-left: .5em;
    padding-right: .5em;
}
dd {
    float: left;
    /* Hard code the width of the 2nd column here...
       ... make it take up all the remaining space of the parent
    */
    width: calc(100% - 120px);
}

<dl>
    <dt>System Type</dt><dd>My System Type</dd>
    <dt>Manufacturer</dt><dd>Very very very very very long second column Very very very very very long second column Very very very very very long second column Very very very very very long second column Very very very very very long second column</dd>
</dl>

【讨论】：

非常好 - 谢谢！