Preventing long words from flowing out of Div without using CSS break-word

Question

I have a div and all the long words (without spaces) flow outside the div.

Please don't mark the question as a duplicate of How to prevent long text from flowing out of a container or Long words are flowing out of the box - How to prevent?, where the problem is solved by using word-wrap: break-word;.

The disadvantage of word-wrap: break-word; is that it also breaks short words which are at the edge of the div, in a way that disrupts the flow of the text. I want short words to remain the way they are and only break the long words. Is it possible to implement this? How do other websites handle it?

Answer 1

it also breaks short words which are at the edge of the div

That's not true...word-wrap: break-word; shouldn't do that.
Perhaps you're confusing this with the word-break: break-all; property (which doesn't work in all browsers).

See this jsfiddle for a comparison: http://jsfiddle.net/Snu8B/3/

For firefox you could try the hyphens property.