CODEWITHSUNDEEP
htmlcss
user3821049
user3821049

Reputation: 61

How to wrap long text inside a div without scroll

<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.

Upvotes: 5

Views: 11454

Answers (7)

44kksharma
44kksharma

Reputation: 2830

for me following worked, my div was inside a scrollable parent div, just add to your child or content div 

    div{
        white-space: normal;
        }

OR

    div{
    white-space: pre-wrap;
    }

Upvotes: 0

imbondbaby
imbondbaby

Reputation: 6411

Try this:

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 */
}

Note: Avoid inline styling.

Demo

Upvotes: 2

Alex Char
Alex Char

Reputation: 33218

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

Upvotes: 10

Kirill Chatrov
Kirill Chatrov

Reputation: 832

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

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

Upvotes: 1

hp4k
hp4k

Reputation: 356

Use text-overflow: ellipsis;.

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

Upvotes: 0

DWX
DWX

Reputation: 2340

Try this:-

word-wrap: break-word;

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

Upvotes: 7

RichTea
RichTea

Reputation: 1435

Try with these CSS rules

 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

Upvotes: 0

Related Questions