line breaks and the hyphen

Want to prevent line breaks from occurring on a particular hyphen? There used to be the handy <nobr> tag but despite support in Netscape, IE and even to this day Mozilla, it was never part of the HTML standard. The regular hypen (-) or the n-dash (&ndash;/&8211;) still cause line-breaking in IE. There's the minus sign (&minus;/&#8722;) but while the minus sign prevents IE from creating a line break at the hyphen, semantically speaking, it's still incorrect. Thus, we should rely on CSS.

<span style="white-space: nowrap;">2001-2002</span>

The white-space property set to nowrap will prevent the browser from wrapping at that particular point.

Published October 27, 2003 · Updated September 17, 2005
Categorized as HTML and CSS
Short URL: https://snook.ca/s/37

Conversation

7 Comments · RSS feed
1
James Pittman said on March 17, 2004

Great - this is exactly what I was looking for. I wish DreamWeaver would tell you the "correct" XHTML implementations of proprietary tags like <nobr> so web designers wouldn't have to go digging...

2
Mikw said on February 18, 2006

Just stumbled on this, but maybe there would be an answer to my question. When writing text for HTML, is there a tag I can use to prevent a hyphenated phrase from breaking on the hyphen. For instance, so that a phrase like "rose-colored" will stay together and not break with "rose-" on the end of a line and "colored" on the next.

Thanks if you can help. I haven't been able to find this in any references I've searched in.

3
Jonathan Snook said on February 18, 2006

Mikw: I'm not sure what you mean as the code example provided in the article should solve your problem.

4
Mikw said on February 21, 2006

Thanks...I see now. The reason for the seemingly nonsense question was that for some reason my browser wasn't correctly displaying the text of the original post. There was just a blank space up there and I didn't realize until later that's where the text was. Sorry for the confusion.

5
Max said on October 24, 2006

There's also a special Unicode-Character called "NON-BREAKING HYPHEN" 0x201, which works fine in IE and FF. Use the Entity ‑ AKA $this->normalizeEntities16bit("8209")

6
Max said on October 24, 2006

Ok, looks like the Textarea accepts Entities so if have to quote the Ampersand:
Use the Entity $this->normalizeEntities16bit("2011") AKA $this->normalizeEntities16bit("8209")

7
Stewart Curry said on April 17, 2007

thank you! I knew this existed, just couldn't remember the syntax!

Sorry, comments are closed for this post. If you have any further questions or comments, feel free to send them to me directly.