Web Design: How to Stop Text from Word Wrapping Tips, Tricks and Tutorials 21 MAR 2011

css ninja t-shirtAlthough in 99% cases, word wrapping in web pages is essential, there is that 1% of the time where you do actually want a line of text to remain on a single line, even if it does push your page into horizontal scrollbar land (which is always a bad thing note). Like phone numbers for example. You don’t really want those to wrap if they are expressed in a token format for easier reading: e.g. 021 990 2312 <-- I'm not using the trick here, so this will word wrap if necessary! :) Anyway, back in the day HTML had what was called the NOBR tag, basically an inline tag that prevented text from being broken / word wrapped.

<nobr>Don’t wrap this text</nobr>

It still works and is supported by the major browsers, but it has long since been deprecated in the HTML specification meaning that ideally, you shouldn’t be using it in your website code.

So a different solution then?

CSS has the useful white-space attribute and leveraging this you can create a CSS class which can then be applied as part of the block or inline HTML container holding the text you don’t want to break.

The rule looks like this:

.nobr {white-space:nowrap;}

And now you know. Nifty.

Related Posts:

About Craig Lotter

South African software architect and developer at Touchwork. Husband to a cupcake baker and father to two little girls. I don't have time for myself any more.

  • Secretsof C

    Thanks for sharing : )

  • Dnote

    Great, thanks for this!!