Wrap the words by comma not by space with in html div

Question

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

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

Answer 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 A1, High A2(4), Low A3

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

Answer 2

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>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.