210

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

0

4 Answers 4

352

Just add

white-space: initial;

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

6
  • 13
    Works fine for most browsers, but to make it work in IE11 I had to use white-space: normal;
    – jenny
    Oct 15, 2018 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. May 19, 2019 at 7:49
  • 1
    Worked like a charm! Apr 22, 2021 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. Jun 25, 2021 at 6:47
  • 1
    this is kind of magic
    – Z.R.T.
    Jul 8, 2021 at 12:35
323
word-wrap: break-word

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

7
  • 2
    whilst it is CSS3, IIRC it works in most of the major browsers. +1
    – Hux
    Aug 27, 2010 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, 2010 at 20:02
  • 9
    word-break: break-word; worked for me. Nov 1, 2020 at 20:46
  • 2
    Any idea why this doesn't work but white-space: initial; does?
    – Dror Bar
    Dec 9, 2020 at 14:40
  • 4
    word-wrap is an unknown property. Did you mean word-break? Feb 3, 2021 at 13:39
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.

4

Well, you can stick one or more "soft hyphens" (&#173;) 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.

1
  • you can use min-width and width together to fix it like this width: min-content; min-width: 100%; Dec 27, 2019 at 10:21

Not the answer you're looking for? Browse other questions tagged or ask your own question.