Div with tall text inside it floats my layout

Question

I have a div with a long text inside it that destroys my layout arrangement. Is there any way to split the words by any logic?

<div style="width:100px">thisdivmessesupmylayoutwithitslongchildtext</div>

Answer 1

Here's the way to do it:

<div style="width:100px;word-wrap:break-word">thisdivmessesupmylayoutwithitslongchildtext</div>

Using word-wrap: break-word; we can force the long word to move down a line when it reaches the parent width.

Note: word-wrap is a CSS3 property.

Answer 2

set "width:auto" and "word-wrap:break-word"

this code will set the content in div as per the screen size..as contents in div reaches to right end of screen it will go to next line.

<div style="width:auto;word-wrap:break-word">thisdivmessesupmylayoutwithitslongchildtext</div>