为 :after content non-break 标记空格答案

【问题标题】：Mark space for :after content non-breaking为 :after content non-break 标记空格
【发布时间】：2015-01-22 04:46:18
【问题描述】：

我正在使用 :after 在导航元素的末尾添加一个小图形标志。例如

.navTreeItem .state-restricted:after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  background: red;
  border-radius: 5px;
}

目前，如果小标志到达行尾，它会自行转到下一行，例如

- Navigation item one
  {flag}

- Navigation item two

但是，为了避免寡妇标志，我希望标志前的空格是不间断的，所以它看起来像这样：

- Navigation item
  one {flag}

- Navigation item two

我不能使用 white-space: nowrap 因为我确实希望文本能够换行。有什么想法吗？

【问题讨论】：

你试过position: absolute; right: -10px; top: 0;
那种工作，虽然如果我使用 top: 0;它不适用于多行条目。它还使标志突出在空间的边缘，这是次优的。
如果我给列表项一个填充，它会处理重叠，但是我会失去大约 12px 的宽度。嗯
实际上，我们并没有在不同浏览器中获得一致的行为，所以我认为它不是跑步者。
CSS for changing color of last word in h1 的可能重复项

标签： css

【解决方案1】：

恐怕这里的问题是，当您在伪元素上设置display: inline-block 时，它会成为一个被视为文本外部的元素（类似于图像）并且可能会被换行到下一行，即使它紧跟在一个字符之后。如果你让它默认为display: inline，width 属性不适用于它，所以它不会做你想做的事。

但您可能会考虑另一种方法。例如，您可以使用 U+25CF BLACK CIRCLE “●”之类的字符并根据需要对其进行着色，而不是使用 CSS 创建一个看起来像实心圆圈的视觉对象。这设置了明显的限制，因为您想要使用的形状可能不作为字符存在，或者这些字符在字体中可能没有得到足够好的支持。但在简单的情况下，该方法可能是可行的：

.navTreeItem .state-restricted:after {
  content: "\25cf";
  color: red;
}

<div class=navTreeItem>
<div class=state-restricted>I really, really, really do want to prevent any
line break between this text and the :after pseudo-element.</div>
</div>

【讨论】：

这可能是最好的选择。我一直在研究 unicode，虽然我找不到我正在寻找的确切图标，但我找到了一些客户可能会满意的替代方案。谢谢。