CSS - 斜线与空格的空白控制

Question

我收到了一些我无法控制但想控制其显示的文本。

即我的代码：<div>{{ incoming_text }}</div>

这也是在我无法对incoming_text 做任何花哨的环境中（例如字符串替换/替换）。

当文本如下“被困/困难/拐角（分词）”时，换行（窄宽度）如下：

trapped/in
difficulty/cornered
(participle)

有没有办法控制它，以便文本换行：

trapped/
in difficulty/
cornered
(participle)

问题是“in”和“difficulty”之间的换行实际上混淆了它的含义，即它需要放在一起。

---

所以类似下面的内容也是可以接受的：

trapped/in difficu-
lty/cornered (part-
iciple)

Answer 1

这也是在我无法做任何花哨的环境中 传入文本（如字符串替换/替换）。

如果没有这种情况，您可以使用 javascript 将 / 替换为 <span class="separator">/<span>。

然后你可以添加一个 ::after 伪元素来引入一个换行符：

.separator::after {
  content: '\00000a';
  white-space: pre;
}

但我很确定如果不先将其包含在 <span> 元素中，就不可能使用单个字符 / 作为 CSS 选择器。

我在 MDN 上查看了较新的伪类，例如 :where 和 :is，但似乎没有任何东西 - 即使在最新的 CSS 中 - 似乎可以访问文本节点。