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

将每一对包裹在跨度中，并将它们设计成不会断裂，就像这样。

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

它有点难看，但代码更少。

Answer 2

最安全的方法是使用nobr标记（它从未出现在任何规范中，但一直是最可靠的方法）：

<nobr>Nomal A1,</nobr> <nobr>High A2(4),</nobr> <nobr>Low A3</nobr>

使用更详细的span标记和 CSS 代码white-space: nowrap几乎同样可靠，但自然会失败，例如在浏览器中禁用 CSS 支持时。

Answer 3

虽然 CSS 有一个word-wrap属性，但没有基于字符的换行选项。一般来说，CSS 仅限于样式。

您需要使用能够识别视口并可以操纵 DOM 的客户端技术（即 JavaScript）来执行此操作。