How do i make the text in this div expand vertically?

Question

Here is something that has bogged me down for quite sometime. I have created two fiddles so you can test live:

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

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

Looking at the Fiddle #1 you can make out that if the text is not formatted properly with spaces, the text overflows the border. How do i make this function similar to fiddle #2? Or is this unavoidable?

Answer 1

You could try adding the CSS rule word-wrap: break-word; Though, the results may look odd.

Answer 2

add style element to div : style="word-wrap: break-word as show below

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