Menu
<div style="width:200px; margin:0 auto;"> 01234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921.........
</div>
The above code is showing a long scrollbar. I want to keep it inside the div's declared width (width: 200px;) without scrolling.
I have tried float, display, position, overflow, but nothing works here.
825
If you've faced the situation when you need to wrap words in a <div>, you can use the white-space property with the "pre-wrap" value to preserve whitespace by the browser and wrap the text when necessary and on line breaks. Also, you'll need the word-wrap property.
The overflow-wrap CSS property applies to inline elements, setting whether the browser should insert line breaks within an otherwise unbreakable string to prevent text from overflowing its line box.
Breaking long words The word-wrap property is now treated by browsers as an alias of the standard property. An alternative property to try is word-break . This property will break the word at the point it overflows.
Alternative you can use overflow-wrap: break-word;. Also avoid inline styles.
css
div{
width: 200px;
margin: 0 auto;
overflow-wrap: break-word;
word-wrap: break-word; /* Firefox support */
}
Fiddle
147
Try this:-
word-wrap: break-word;
DEMO: http://jsfiddle.net/dwebexperts/thyD9/
37
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
