Responsive formatting with long words

I was checking the ED demo on my phone today and discovered a problem in the Recent Discussions module. This also shows up in other ED pages where the message body or preview is seen.

The story class is set in a way that is non-responsive. There is no line-break and overflow is visible. On a mobile device it forces scaling or scrolling. On a desktop it just runs off the div. The theoretically correct CSS to use is word-wrap: break-word but this used to have unwanted side effects. For example, Shakespeare in a small div on older browsers turned out like this:

O they have lived long on the alms-basket of word
s. I marvel thy master hath not eaten thee for a wor
d; for thou art not so long by the head as honorific
abilitudinitatibus: thou art easier swallowed than a
flap-dragon.

However I'm pretty sure since the IE8 and Firefox 9 days the box-model will try to first wrap at the space, then break the word. Not 100% though. I was testing this code with good results:

<div style="width:100px; border:1px solid #000; word-wrap:break-word">



"O, they have lived long on the alms-basket of words.

I marvel thy master hath not eaten thee for a word;

for thou art not so long by the head as

honorificabilitudinitatibus: thou art easier

swallowed than a flap-dragon."



</div>