How can I make text appear on next line instead of overflowing?

css text overflow
user342391 picture user342391 · Aug 27, 2010 · Viewed 237.2k times · Source

I have a fixed width div on my page that contains text. When I enter a long string of letters it overflows. I don't want to hide overflow I want to display the overflow on a new line, see below:

<div id="textbox" style="width:400px; height:200px;">
dfssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssfddddddddddddddddddddddsdffffffffffffffffsdffffffffffffffffdfssssssssssssdf
</div>

Is there anyway to disable overflow and put the overflowing text on a new line??? Twitter does something like this but I can't figure it out with CSS it's possible they are using Javascript.

Can anybody help with this??

Answer

Pankaj Verma picture Pankaj Verma · Sep 28, 2015

Just add 

white-space: initial;

to the text, a line text will come automatically in the next line.

Related questions

Limit text length to n lines using CSS

Is it possible to limit a text length to "n" lines using CSS (or cut it when overflows vertically). text-overflow: ellipsis; only works for 1 line text. original text: Ultrices natoque mus mattis, aliquam, cras in pellentesque tincidunt elit purus lectus, …

Read More
Can overflow text be centered?

When I specify text-align:center for an element with a width that is greater than the width of the text, the text is centered within the content box of the element (as expected). When I specify text-align:center for an …

Read More
How can I replace text with CSS?

How can I replace text with CSS using a method like this: .pvw-title img[src*="IKON.img"] { visibility:hidden; } Instead of ( img[src*="IKON.img"] ), I need to use something that can replace text instead. I have to use [ ] to …

Read More