Handling Wrapped Words Using whitespace: nowrap

When building a website, you’ll often encounter situations where the title of a section would be just a little too long causing the last word to wrap. Furthermore, this wrapping may only occur in some browsers. You may be inclined to put a BR tag before two or more words so that the title doesn’t look bad but there’s a better way using the CSS whitespace rule.

Create a CSS class as follows:
[cc lang=”css”]
span.nowrap {
white-space: nowrap;
}
[/cc]

and then use it where you would otherwise put a BR tag, e.g.
[cc lang=”html”]
This is a long title where the last word sometimes wraps.
[/cc]

This way, the last three words will wrap ONLY if the last word wraps when the span.nowrap isn’t present.

Which looks better?

This is a long title where the last word sometimes
wraps.

or

This is a long title where the last
word sometimes wraps.