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
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.
use overflow:auto
it will give a scroller to your text within the div
:).
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
or with php you could short the long words...
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;
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 tooverflow-wrap
, withword-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
Source: Stackoverflow.com