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

Enneagon

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.

Avalon

The second idea has the problem that it does not prevent IE from breaking before an opening parenthesis “(”. – Sounding

Thanks for the   idea. simple solution to my problem – Chinaman

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.

Sounding

Thanks for reply. I solved my problem using your suggestion. It worked fine to me. – Enneagon

Underrated answer. Works like a charm. I had to use </br> after each of the sets of <nobr> tags though to get them on different lines. – Interbrain

Answer 3

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

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.

Mahayana

Answer 4

Use <wbr> in stead of %nbsp; or <nobr>.

<wbr> works like <br> but it will only trigger where necessary.

Simply replace all commas "," with ",<wbr>".

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr

Hound