Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

text

css

overflow

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

like image 836
user342391 Avatar asked Sep 28 '22 04:09

user342391


People also ask

How do I make text go to the next line?

Thankfully, there is a keyboard shortcut that moves to the next line. Move the text cursor to where you want the new line to begin, press the Enter key, hold down the Shift key, and then press Enter again.

How do I make text go to next line in HTML?

Web browsers wrap text automatically to the next line when the current line reaches the right side of the browser. When you add a line break in HTML, you avoid this text wrapping and start new text the next line. To add a line break to your HTML code, you use the <br> tag. The <br> tag does not have an end tag.

How do I change text-overflow?

A text-overflow property in CSS is used to specify that some text has overflown and hidden from view. The white-space property must be set to nowrap and the overflow property must be set to hidden. The overflowing content can be clipped, display an ellipsis ('…'), or display a custom string.


2 Answers

Just add

white-space: initial;

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

like image 322
Pankaj Verma Avatar answered Oct 22 '22 20:10

Pankaj Verma


word-wrap: break-word

But it's CSS3 - http://www.css3.com/css-word-wrap/.

like image 290
mikemerce Avatar answered Oct 22 '22 19:10

mikemerce