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

Question

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

score 346 · Answer 1 · edited Sep 28 '15 at 07:56

346

Just add

white-space: initial;

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

edited Sep 28 '15 at 07:56

Jan

2,060
2
29
34

answered Sep 28 '15 at 07:37

Pankaj Verma

3,469
1
9
2

13

Works fine for most browsers, but to make it work in IE11 I had to use `white-space: normal;` – jenny Oct 15 '18 at 13:50
2

`white-space: initial;` Didn't work in IE 11 for me. Instead I've used `white-space: normal;` and it worked well in all browsers. – Masoud Keshavarz May 19 '19 at 07:49
For my CSS grid based grid cells / responsive design I needed both `whitespace: initial` (or normal if supporting IE) and the `word-wrap: break-word` properties mentioned in this thread. -Thank You – Joel Youngberg Apr 07 '21 at 17:31
1

Worked like a charm! – MubashirEbad Apr 22 '21 at 20:32
1

Saved a lot of time. Tried using word-wrap, overflow-wrap nothing worked, but this works fine in all major browsers. – invinciblemuffi Jun 25 '21 at 06:47
1

this is kind of magic – Z.R.T. Jul 08 '21 at 12:35

score 318 · Accepted Answer · edited Apr 16 '17 at 19:56

318

word-wrap: break-word

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

edited Apr 16 '17 at 19:56

Community

1
1

answered Aug 27 '10 at 19:15

mikemerce

3,512
1
16
9

2

whilst it is CSS3, IIRC it works in most of the major browsers. +1 – Hux Aug 27 '10 at 19:22
1

FYI: You can use either the 'normal' or 'break-word' value with the word-wrap property. Normal means the text will extend the boundaries of the box. Break-word means the text will wrap to next line. – S.Jones Aug 27 '10 at 20:02
9

`word-break: break-word;` worked for me. – Dhaval Jardosh Nov 01 '20 at 20:46
2

Any idea why this doesn't work but `white-space: initial;` does? – Dror Bar Dec 09 '20 at 14:40
4

`word-wrap` is an unknown property. Did you mean `word-break`? – Gil Epshtain Feb 03 '21 at 13:39
word-wrap: anywhere; – Amine ABBAOUI Oct 13 '21 at 13:42
@GilEpshtain `word-wrap` is a known css property, check: https://www.w3schools.com/cssref/css3_pr_word-wrap.asp – Tanay Toshniwal Jan 04 '22 at 12:05

score 6 · Answer 3 · answered Aug 27 '10 at 19:19

6

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.

answered Aug 27 '10 at 19:19

casablanca

69,683
7
133
150

score 4 · Answer 4 · answered Aug 27 '10 at 19:15

4

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.

answered Aug 27 '10 at 19:15

Pointy

405,095
59
585
614

you can use min-width and width together to fix it like this width: min-content; min-width: 100%; – Rashid Iqbal Dec 27 '19 at 10:21

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

4 Answers4

Linked