How to make the text in this div expand vertically?

Question

Here's something that bores me for quite some time. I created two violins so you can test live:

Fiddle # 1: http://www.jsfiddle.net/Jdk9R/2/

Fiddle # 2: http://www.jsfiddle.net/d5PEu/

Looking at Fiddle # 1, you can understand that if the text is not formatted correctly with spaces, the text overflows the border. How to make this function look like fiddle # 2? Or is it inevitable?

Answer 1

You can try adding the CSS rule word-wrap: break-word; Although, the results may look strange.

Answer 2

add a style element to the div: style = "word-wrap: break-word, as shown below

<div id="sd" style="word-wrap: break-word"> Loremipsumdolorsitamet,consecteturadipisicing elit,seddoeiusmodtemporincididuntutlaboreetdoloremagna aliqua.Utenimadminimveniam,quisnostruexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.Duisauteiruredolorinreprehenderitinvoluptatevelitessecillumdoloreeufugiatnullapariatur.Excepteursintoccaecatcupidatatnonproident,suntinculpaquiofficiadeseruntmollitanimidestlaborum. </div>