css - 如何防止 CSS 在新行上显示 ::after 内容？

Question

我正在尝试使用 CSS 显示名称列表，以逗号分隔：

a:after {
  content: ', \00a0';
  display: inline-block;
  text-decoration: none;
}

<a href="foo.com">Foo</a>
<a href="bar.com">Bar</a>

问题是结果看起来像这样：

Foo, Baz
, Bar

标签： css

Answer 1

您需要将awhite-space: nowrap;元素添加到css 中，以防止逗号单独显示在下一行中。

a {
 white-space: nowrap;
}

a:after {
  content: ', \00a0';
  display: inline-block;
  text-decoration: none;
}

<a href="foo.com">Foo</a>
<a href="bar.com">Bar</a>
<a href="foo.com">Foo</a>
<a href="bar.com">Bar</a>
<a href="foo.com">Foo</a>
<a href="bar.com">Bar</a>
<a href="foo.com">Foo</a>
<a href="bar.com">Bar</a>
<a href="foo.com">Foo</a>
<a href="bar.com">Bar</a>
<a href="foo.com">Foo</a>
<a href="bar.com">Bar</a>
<a href="foo.com">Foo</a>
<a href="bar.com">Bar</a>
<a href="foo.com">Foo</a>
<a href="bar.com">Bar</a>
<a href="foo.com">Foo</a>
<a href="bar.com">Bar</a>
<a href="foo.com">Foo</a>
<a href="bar.com">Bar</a>