如何使 'dl' 内容自动换行，就像 table 'td' 换行一样？

Question

我试图尽可能避免使用 tables 进行格式化。

在 table 中，如果第二列中的单元格需要换行，它只会在该单元格内换行。当我尝试使用列表 (dl) 时，'second column' (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>

输出截图：

Answer 1

我认为您必须对第一列的宽度进行硬编码，这是我能够取得进展的唯一方法，但我认为这就是您要找的东西。满分，我受到使用百分比的 this answer 的启发。在这种情况下，如果您改为使用像素对宽度进行硬编码，结果会更好，这样您就不会像使用百分比那样在 "columns" 之间出现 growing/shrinking 间隙。

您必须调整 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>

如何使 'dl' 内容自动换行，就像 table 'td' 换行一样？

How can I make 'dl' content word wrap the way a table 'td' would wrap?

html

css

word-wrap