Question

我有一些带有动态内容的定义列表。它们彼此下方并排显示<dt>和<dd>对。每个<dt>以冒号结尾，冒号不是内容的一部分。取而代之的是，冒号是通过元素后的CSS提供的。

dt:after {
  content: ":";
  position: relative;
  display: inline-block;
}

<dl>
  <dt>cat name</dt>
  <dd>Puss</dd>
</dl>
<dl>
  <dt>dog name</dt>
  <dd>Lassie</dd>
</dl>
<dl>
  <dt>horse name</dt>
  <dd>Fury</dd>
</dl>

如果没有太多空间，则可以并且应该包装dl-Elements的内容。但是在某些宽度下，只有冒号跳到了我要防止的下一行。

我尝试使用white-space: nowrap;，但是<dt>元素中两个不同单词之间也没有换行符。

如果可能，我更喜欢CSS解决方案。

Answer 1

您的CSS选择器定位了错误的元素。它必须指向dt:after

dt:after {
  content: ":";
  position: relative;
  display: inline-block;
}

<dl>
  <dt>cat name</dt>
  <dd>Puss</dd>
</dl>
<dl>
  <dt>dog name</dt>
  <dd>Lassie</dd>
</dl>
<dl>
  <dt>horse name</dt>
  <dd>Fury</dd>
</dl>

[编辑]

将dt:after更改为display:inline。当DL的宽度变得太小且内容降到新行时，冒号将保留在最后一个单词上。

dt:after {
  content: ":";
  position: relative;
  display: inline;
}

<dl>
  <dt>cat name</dt>
  <dd>Puss</dd>
</dl>
<dl>
  <dt>dog name</dt>
  <dd>Lassie</dd>
</dl>
<dl>
  <dt>horse name</dt>
  <dd>Fury</dd>
</dl>

如何防止元素与其后元素之间的换行？

1 个答案:

[编辑]