Skip to the content...

Welcome to the David Walsh Blog. I'm a MooTools, Dojo, jQuery, CSS, and PHP Web Developer located in Madison, Wisconsin, United States. Please contact me if I can make your experience on my website better.

Replace NOBR Tags with CSS

16 Responses »

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.

Discussion

  1. December 17, 2009 @ 10:42 am

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

    I also love { white-space:pre; }

  2. alex
    December 17, 2009 @ 10:52 am

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

  3. cbloss
    December 17, 2009 @ 11:19 am

    I second what Adam and Alex said! :)

  4. December 17, 2009 @ 12:03 pm

    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. December 17, 2009 @ 12:26 pm

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

  6. December 17, 2009 @ 3:09 pm

    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. December 17, 2009 @ 3:11 pm

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

  8. michael bryan
    December 18, 2009 @ 12:57 am

    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
    December 20, 2009 @ 9:20 pm

    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
    December 20, 2009 @ 9:21 pm

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

  11. April 29, 2010 @ 4:11 pm

    Google’s default page uses NOBR tags.

Be Heard!

Share your thoughts with fellow developers of all skill levels! I want to hear from you!

Name*:
Email*:
Website:  
Wrap your code with <code> tags, f00!