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;
}

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

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