用逗号包装单词而不是用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 markup（它从未在任何规范中发挥作用，但始终是最可靠的方法）：

<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）来执行此操作。