Question

Specifically, say I have a string like ABC-123-NNN. I would like the paragraph to have line breaks, but not to break at the dashes.

i.e. if my text is “The serial number ABC-123-NNN is not valid”, I would like to keep together the entire serial number if it exceeds the container width.

So the following is ok:

  The serial number 
  ABC-123-NNN is not 
  valid

But the following (which is the behavior of IE6) is not:

  The serial number ABC-
  123-NNN is not valid

Currently IE seems to break at dashes. Is there any applicable CSS or whatever I can apply to avoid it?

Answer 1

To fix in IE: wrap your text in < NOBR > tags, and then use the < WBR > tag to indicate a break:

<nobr>The serial number<wbr /> ABC-123-NNN is not<wbr /> valid</nobr>

or to just make sure that the serial number is intact:

The serial number <nobr>ABC-123-NNN</nobr> is not valid

Note that this method is deprecated.