text flowing out of div

Question

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

User · Answer

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/

User · Answer

This did the trick for me    word-break  break-all

User · Answer

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

User · Answer

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

User · Answer

If this helps  Add the following property with value to your selector   white-space  pre-wrap

User · Answer

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

User · Answer

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

User · Answer

You should use overflow hidden   or scroll  http   jsfiddle net UJ6zG 1   or with php you could short the long words

User · Answer

i recently encountered this  I used  display block

[css] text flowing out of div

Examples related to css

Examples related to border