Question

我在导航中的元素末尾添加了一个小图形标志：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，因为我确实希望文本能够包装。有什么想法吗？

Answer 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>

标记空间：在内容不破坏之后

1 个答案: