How to wrap long text inside a div without scrolling

Question

<div style="width:200px; margin:0 auto;"> 01234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921.........
</div>

The code above displays a long scroll bar. I want to save it in the declared width of the div ( width: 200px;) without scrolling. I tried float, display, position, overflow, but nothing works here.

Answer 1

Try the following: -

word-wrap: break-word;

DEMO: http://jsfiddle.net/dwebexperts/thyD9/

Answer 2

You can use an alternative 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

Answer 3

<div style="width:200px; margin:0 auto; word-wrap:break-word;">    01234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921.........
</div>

JSFiddle: http://jsfiddle.net/Emr84/

Answer 4

:

div {
    width:200px;
    margin:0 auto;
    white-space: pre-wrap;      /* CSS3 */   
    white-space: -moz-pre-wrap; /* Firefox */   
    white-space: -o-pre-wrap;   /* Opera 7 */    
    word-wrap: break-word;      /* IE */
}

. inline.

Answer 5

CSS

 white-space: nowrap;      //keep the text on one line
 overflow: hidden;         //prevent the text from being shown outside the border
 text-overflow: ellipsis;  //cut off text with an elipsis

Answer 6

text-overflow: ellipsis;.

Full explanation: http://quirksmode.org/css/user-interface/textoverflow.html