How can I make text appear on next line instead of overflowing?
CssTextOverflowCss Problem Overview
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??
Css Solutions
Solution 1 - Css
Just add
white-space: initial;
to the text, a line text will come automatically in the next line.
Solution 2 - Css
word-wrap: break-word
But it's CSS3 - http://www.css3.com/css-word-wrap/.
Solution 3 - Css
Try the <wbr> tag - not as elegant as the word-wrap property that others suggested, but it's a working solution until all major browsers (read IE) implement CSS3.
Solution 4 - Css
Well, you can stick one or more "soft hyphens" (­) in your long unbroken strings. I doubt that old IE versions deal with that correctly, but what it's supposed to do is tell the browser about allowable word breaks that it can use if it has to.
Now, how exactly would you pick where to stuff those characters? That depends on the actual string and what it means, I guess.