css - 在html div中用逗号而不是空格包装单词

Question

我需要使用逗号 (,) 换行文本。有什么方法可以使用 CSS 或其他方式做到这一点。

Nomal A1, High A2(4), Low A3 

如果空间不够，应该这样换行，逗号应该是唯一换行的地方。

Nomal A1, High A2(4),
Low A3   

这不应该像这样包装

Nomal A1, High A2(4), Low
A3

Answer 1

将每一对包裹在 span 中，并将它们设置为不断裂，就像这样。

HTML

<div class="paired-text">
<span>Nomal A1,</span> <span>High A2(4),</span>
        <span>Low A3</span>
</div>

CSS

.paired-text span{ white-space: nowrap; }

或者，您可以在要粘在一起的每对单词之间呈现一个不间断空格 (   )。不过，我更喜欢我提供的第一个想法，它更简洁。

Nomal A1, High A2(4), Low A3

它有点丑，但代码更少。