css word wrap with hyphens

Question

I have a line of text in a div that might look like the following:

A really long user defined team Name 1 (7-0)

Where 7-0 would be the team record. This is in a div of a specific width and sometimes the browser likes to break on the hyphen which is unwanted because it should be treated the same as a word. So I might end up with:

A really long user defined team Name 1 (7
-0)

Is there a way to get word wrap working where it treats the hyphen as if it were a normal character and not a place that should support a break?

Answer 1

Although the accepted answer does te job just fine, you should consider to use the somewhat more obvious css style for this:

CSS:

.together {
    white-space: nowrap;
}

HTML:

<p>A really long user defined team Name 1 <span class="together">(7-0)</span></p>

Answer 2

Depending on the context, addressing this as a content issue could be more appropriate than addressing it in the presentation layer. Assuming that you want this to never be broken by word wrapping even if someone copied/pasted it out of your website and into somewhere else, replace the hyphen with a non-breaking hyphen. Unicode U+02011 which can be inserted in HTML like A really long user defined team Name 1 (7‑0).