虽然多列布局在现代浏览器中得到了相对广泛的支持，但对列分隔符的控制实现得很差。大多数实现只支持在元素内部防止列中断，而不是在元素之后或之前。因此，虽然理论上可以使用break-before或break-after属性，但实际上需要使用break-inside。（根据MDN，IE 10+支持break-after: avoid-column，但在dt上设置它似乎对IE 11没有任何影响。
除了dt和dd之外，您不能在dl中使用任何东西。这不仅仅是一个正式的规则;浏览器实际上会强制执行它，忽略任何使用dt和dd Package 器的尝试。这实际上是dl元素中的一个设计缺陷。
因此，您可以使用其他标记来代替dl，例如。

<div class=dl>
  <div class=pair>
    <div class=dt>...</div>
    <div class=dt>...</div>
  </div>
  <div class=pair>
    <div class=dt>...</div>
    <div class=dt>...</div>
  </div>
  ...
</div>

字符串
然后，您可以按以下方式设置其样式：

.dl {
  -webkit-column-width: 20em;
  -moz-column-width: 20em;
  column-width: 20em;
}
.dd { 
  margin-left: 1em;
}
.pair {
  break-inside: avoid-column;
  -webkit-column-break-inside: avoid;
}

型
这可以防止在现代版本的IE和Chrome中出现不需要的列中断。恐怕没有办法让它在Firefox上工作。

**更新：**看起来，如果你将<div class=pair>元素 Package 在一个单单元格表格<table><tr><td><div class=pair>...</div></table>中，那么Firefox不会在列格式中破坏该元素。原因可能是它通常试图避免在表单元格中出现列中断，这是相当明智的。

这花了一段时间！@Martha指出，这现在在Edge中工作，我刚刚检查过，它在Chrome中工作。
如果您将dt设置为：

dt {  break-after:avoid-column; }

字符串
那它就会和它后面的东西在一起你可以尝试将它添加到问题中的演示中，它神奇地工作了。