How do I make a text go onto the next line if it overflows?

Question

I tried word-wrap: break-word;, but it separates lines mid word.

Maybe it separates the line mid word because you set it to `break-word`, what did you expected that to do? Have you check what other options `word-wrap` has? — Ash Burlaczenko, Dec 03 '11 at 18:17
This is the default behavior in most contexts. Could you provide a code snippet? — sabof, Dec 03 '11 at 18:19
Possible duplicate of [How to word wrap text in HTML?](http://stackoverflow.com/questions/1147877/how-to-word-wrap-text-in-html) — ithil, Dec 02 '15 at 14:24

score 102 · Answer 1 · edited Apr 18 '17 at 16:07

102

In order to use word-wrap: break-word, you need to set a width (in px). For example:

div {
    width: 250px;
    word-wrap: break-word;
}

word-wrap is a CSS3 property, but it should work in all browsers, including IE 5.5-9.

edited Apr 18 '17 at 16:07

Devid Farinelli

answered Dec 04 '11 at 09:30

Serina Patterson

It also works for width in in (inches) – joetinger Sep 30 '14 at 19:23
Thanks a lot, it saved a whole lot of headache for me, when i was trying to set the width on a datalist which is using a label control to display multi-line text content..Once again, thanks. – Ron May 17 '17 at 13:58
It also works for percentages of width in React – fungusanthrax Jun 30 '17 at 16:49

score 29 · Accepted Answer · answered Dec 03 '11 at 18:24

29

As long as you specify a width on the element, it should wrap itself without needing anything else.

answered Dec 03 '11 at 18:24

Tieson T.

2

The error was that it was part of a pre element. Once I changed pre to p this answer worked. – user784756 Dec 04 '11 at 11:44
What happens if you set the `width: auto`? My button's text still gets cut off at the right edge of it's parent container. Any ideas? – andy4thehuynh Dec 03 '13 at 20:50
@andystructible That's probably going to be hard to answer, lacking context (what other styles are applied to it). I'd suggest opening a new question. One possibility is that at some point `overflow: hidden` was applied to the button, or the button is not in the document flow (if, for instance, it's been floated). – Tieson T. Dec 03 '13 at 22:46
6

If the text doesn't wrap by itself the problem may be that you have `white-space: nowrap;` somewhere in the styles. – Velimir Mar 19 '18 at 17:15
thanks @Velimir that one was the solution for mine – nrmb May 18 '18 at 10:30
@Velimir Thanks buddy. – Christopher Nolan Oct 18 '21 at 17:29

score 16 · Answer 3 · answered Oct 12 '13 at 06:34

16

word-wrap: break-word;

add this to your container that should do the trick

answered Oct 12 '13 at 06:34

Damathryx

3 Answers3