text flowing out of div

When the text is without spaces and more than the div size 200px it's flowing out The width is defined as 200px I have put my code here http://jsfiddle.net/madhu131313/UJ6zG/ You can see the below pictures edited: I want the the text to go to the next line

It's due to the fact that you have one long word without spaces. You can use the word-wrap property to cause the text to break:

#w74 { word-wrap: break-word; }

It has fairly good browser support, too. See documentation about it here.

Use

white-space: pre-line;

It will prevent text from flowing out of the div. It will break the text as it reaches the end of the div.

You should use overflow:hidden; or scroll

http://jsfiddle.net/UJ6zG/1/

or with php you could short the long words...

You need to apply the following CSS property to the container block (div):

overflow-wrap: break-word;

According to the specifications (source CSS | MDN):

> The overflow-wrap CSS property specifies whether or not the browser should insert line breaks within words to prevent text from overflowing its content box.

With the value set to break-word

> To prevent overflow, normally unbreakable words may be broken at arbitrary points if there are no otherwise acceptable break points in the line.

Worth mentioning...

> The property was originally a nonstandard and unprefixed Microsoft extension called word-wrap, and was implemented by most browsers with the same name. It has since been renamed to overflow-wrap, with word-wrap being an alias.

---

If you care about legacy browsers support it's worth specifying both:

word-wrap    : break-word;
overflow-wrap: break-word;

Ex. IE9 does not recognize overflow-wrap but works fine with word-wrap

use overflow:auto it will give a scroller to your text within the div :).

This did the trick for me:

{word-break: break-all; }

If this helps. Add the following property with value to your selector:

white-space: pre-wrap;

this trick works for me:

{
  word-break: break-all;
  white-space: pre-wrap;
}

white-space
word-break

i recently encountered this. I used: display:block;

If it is just one instance that needs to be wrapped over 2 or 3 lines I would just use a few <wbr> in the string. It will treat those just like <br> but it wont insert the line break if it isn't necessary.

<div id="w74" class="dpinfo">
adsfadsadsads<wbr>fadsadsadsfadsadsa<wbr>dsfadsadsadsfadsadsads<wbr>fadsadsadsfadsadsadsfa<wbr>dsadsadsfadsadsadsfadsad<wbr>sadsfadsadsads<wbr>fadsadsadsfadsads adsfadsads
</div>

Here is a fiddle.

http://jsfiddle.net/gaby_de_wilde/UJ6zG/37/