Replace NOBR Tags with CSS

This is just a simple tip for those still clinging to NOBR HTML tags. The NOBR tag, for those who haven't seen them before, prevent a selection of text from being "broken" into multiple lines. It looks something like this:

<nobr>Don't Break This Text</nobr>

While NOBR tags still work in major browsers, they've been deprecated and you should try to avoid them when possible. Instead, wrap your text in a SPAN tag with a nobr CSS class and apply the following settings to the nobr CSS class:

.nobr	{ white-space:nowrap; }

A quick reminder for those who've not yet moved onto using CSS to prevent line breaks. Especially useful for placing phone numbers on a website.


Comments

  1. Adam Meyer

    Funny. I knew about the css way, but now the html way.

    I also love { white-space:pre; }

  2. ALEX

    Funny! I knew about the CSS too, but I didn’t know the tag. So much to learn, and unlearn!

  3. CBloss

    I second what Adam and Alex said! :)

  4. Nickolas Simard

    I haven’t seen those NOBR tags in quite some time! I don’t even think I saw those when I first studied the HTML! I must have stumbled on them later on…

    Still good to know the two solutions.

  5. Jacob Rask

    Better than class=nobr would be class=telephone, if that’s what you’re marking up, otherwise it’s presentational logic in HTML ;-)

  6. James Lin

    Wow I’ve never used nobr before… if some kind of apocalyptic disaster happens to the Internet forcing us to use deprecated html this will come in handy :)

  7. Nickolas Simard

    @James Lin: *Paranoid mode* Don’t talk too loud! THEY are watching! :-)

  8. Michael Bryan

    When I first started learning html I ran into the problem of having to keep a telephone number on a site from breaking. After googling for a while I finally found the white-space css but never came across the nobr tag.

    I guess it’s for the best as I’d probably still be using it.

  9. Travis Pulley

    I never knew about the nobr tag. Before I knew the css way, sometimes I’d make a table with one cell just to invoke . I’m not proud of it, but sometimes deadlines are pushy.

  10. Travis Pulley

    @Travis Pulley: oops – that should read: >td nowrap=”nowrap”<

  11. Herb Meehan

    Google’s default page uses NOBR tags.

  12. Craig Lotter

    Eh? Learn something new every day! :)

  13. saravana

    Thnx David, Before seeing this post i hardly heard this tag exist. It would be much better if you add the cross browser compatible list both for the Tag and CSS example you have given.

  14. Graham

    I saw this tag randomly on a site one day and googled-it because I had never heard of it before. Thanks for the new knowledge, hombre!


Be Heard!

Share your thoughts without being a jerk! And wrap your code in <code> tags, f00!

Name*:
Email*:
Website: