css word wrap with hyphens

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?

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>

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).

http://jsfiddle.net/zfsYK/4/

here you go..

I just wrapped the text that you do not want to break in a div set to display:inline..

can't seem to make it break now

For anyone is searching for a solution. You should apply white-space: nowrap to each of your hypened word occurrence within the text. I've made this for myself, maybe it helps:

https://jsfiddle.net/ooj6kmx1/21/

Regards