Wrap words with a comma with no space using html div

Question

I have a requirement for wrapping text with a comma (,). Is there a way to do this using CSS or another.

Nomal A1, High A2(4), Low A3 

If there is not enough space, this should be completed so that the comma should be the only place for the cover.

 Nomal A1, High A2(4), Low A3 

it should not be wrapped like

 Nomal A1, High A2(4), Low A3 

Answer 1

Wrap each pair in spans and create them so that they don't break, for example.

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 can display an inextricable space (   ) between each pair of words that you want to glue. I prefer the first idea that I propose, but cleaner.

 Nomal A1, High A2(4), Low A3 

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

Answer 2

While CSS has the word-wrap property, there are no options for character-based wrapping. Generally speaking, CSS is limited in style.

You will need to do this using client technology that knows about the viewport and can manipulate the DOM, i.e. JavaScript.

Answer 3

The safest way is to use the nobr markup (which has never made its way to any specification, but remains the most reliable method for the target):

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

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