NOBR tag CSS alternative

Recently a question was asked on the RootsWeb Help Mailing list about the problem of validating a page that contained the <NOBR> tag.

<NOBR>
(no break)

The NOBR tag ensures that a line of text does not wrap to the next line. This tag is useful for words or phrases that must be kept together on one line. NOTE: if the line of text is long, it can extend beyond the margin of the browser window, so the user must use scrollbars to view the text OR you may not be able to see it at all as is the case in the example below. The <NOBR> tag does not validate.

EXAMPLE:

This line of test will continue in an unbroken line even though it may extend past the margins of the page. This tag should be used with caution.

Instead of using the <NOBR> tag create a css class which can substitute for the <NOBR> tag.

.nobr {white-space: nowrap}

and then apply the style to the element.

EXAMPLE:

<td><nobr><input TYPE=”SUBMIT” VALUE=”Search” name=”SEARCH”/></nobr></td>

The above line of code will NOT validate.

<td class=”nobr><input TYPE=”SUBMIT” VALUE=”Search” name=”SEARCH”/></td>

The above line of code will validate.

Comments

  1. Thank you so much for the nice clear explanation of the CSS alternative to the tag – you did a much better job of explaining than the W3 consortium pages 🙂

  2. For whatever reason, my line of and is breaking when one ends and the other starts. It is definitely not too long to need to do this. So, I’m trying to add the non-breaking line and still having a hard time.

    —-
    IN .CSS:
    .nobr
    {white-space: nowrap}
    —-
    IN .HTML:
    text TEXT

    What am I doing wrong???
    Thanks!

  3. Jennifer, if you can post a url to the page with the problem, I’ll be happy to look at it. pat

  4. I now see that my message above didn’t translate well and lost the code.

    Here’s the test page:
    http://www.jawnty.com/test.html

    The problem spot is “jawnty FEATURED TEMPLATES” — it’s supposed to be on one line.

    I also want the HR to be a solid line of dark blue of HEIGHT=1 and WIDTH=290. But I can’t seem to make the grey HR change in color regardless of the CSS.

    (other things still being amended)
    THANKS!!

  5. I also don’t know why there is so much space between the lines “Below is only a handful…” and “Photos in templates are positioned…”.

    There aren’t any paragraph or line breaks indicated — only a difference to H6…….

    I’m getting very frustrated……. help!

  6. Useful tip, explained concisely. Thank you.

Speak Your Mind

*