5

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

3 Answers 3

7

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 ( &nbsp; ) 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
  • 1
    The second idea has the problem that it does not prevent IE from breaking before an opening parenthesis “(”. Nov 8, 2012 at 17:10
  • Thanks for the &nbsp; idea. simple solution to my problem
    – Will
    Sep 16, 2014 at 14:18
4

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.

2
  • 1
    Thanks for reply. I solved my problem using your suggestion. It worked fine to me. Nov 12, 2012 at 12:38
  • 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. Aug 16, 2018 at 9:08
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.