I have a HTML element that contains the text Snow-boarding, the container element doesn't have enough space to fit the text in one line so I need it to break in two.
In Chrome this is done automatically (I guess it assumes it's two words and leaves "Snow-" in the first line and "boarding" in the second). In Firefox however it just leaves it in one line and it extends beyond the container. I was thinking on using the CSS property "word-wrap", which does break the word, but it doesn't break it in the dash (it leaves "Snow-boardi" in one line and "ng" in the other).
Here's the jsFiddle: http://jsfiddle.net/jSrLb/5/
Any way around this?
Thanks
