使用html div以逗号而不是空格包装这些单词

I have a requirement for wrap text using comma(,). Is there any way to do this using CSS or other.

我需要用逗号(，)包装文本。有什么方法可以用CSS或者其他的方法来实现这一点吗?

Nomal A1, High A2(4), Low A3

If the space is not enough this should be wrap like this, comma should be the only wrapping place.

如果空间不够，应该这样包装，逗号应该是唯一的包装位置。

Nomal A1, High A2(4),
Low A3

this should not be wrap like this

这个不应该这样包装

Nomal A1, High A2(4), Low
A3

3 个解决方案

#1

Wrap each pair in spans, and style them not to break, like so.

把每双鞋都包成横档，并且设计成不会断裂的样子。

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

Alternatively, you could render a non-breaking space (   ) between each pair of words you want to stick together. I prefer the first idea I offer though, it's cleaner.

或者，您可以呈现一个不间断的空间(&)在每两个单词之间你想要粘在一起。我更喜欢我的第一个主意，它更干净。

Nomal&nbsp;A1, High&nbsp;A2(4), Low&nbsp;A3

It's a little uglier, but it's less code.

它有点丑，但代码更少。

#2

While CSS has a word-wrap property, there are no options to wrap based on characters. Generally speaking, CSS is limited to styling.

虽然CSS有一个文字包装属性，但是没有基于字符的包装选项。一般来说，CSS仅限于样式。

You will need to do this with a client-side technology that is aware of the viewport and can manipulate the DOM, i.e. JavaScript.

您将需要使用客户端技术来实现这一点，该技术知道viewport并可以操作DOM(即JavaScript)。

#3

The safest way is to use the nobr markup (which never made its way to any spec but keeps being the most reliable method for the purpose):

最安全的方法是使用nobr标记(它从未进入任何规范，但一直是最可靠的方法):

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

Using a little more verbose span markup and CSS code white-space: nowrap is almost as reliable, but naturally fails e.g. when CSS support is disabled in a browser.

使用稍微冗长的span标记和CSS代码空白:nowrap几乎同样可靠，但是很自然地会失败，例如在浏览器中禁用CSS支持。

#1