562

Okay, this is really confusing me. I have some content inside of a div like so:

<div style="background-color: green; width: 200px; height: 300px;">

Thisisatest.Thisisatest.Thisisatest.Thisisatest.Thisisatest.Thisisatest.

</div>

However, the content overflows the DIV (as expected) because the 'word' is too long.

How can I force the browser to 'break' the word where necessary to fit all of the content inside?

2

19 Answers 19

807

Use word-wrap:break-word;

It even works in IE6, which is a pleasant surprise.


word-wrap: break-word has been replaced with overflow-wrap: break-word; which works in every modern browser. IE, being a dead browser, will forever rely on the deprecated and non-standard word-wrap instead.

Existing uses of word-wrap today still work as it is an alias for overflow-wrap per the specification.

5
  • 81
    Actually, word-wrap is an IE invention. So no surprise that it works in IE :) Commented Jun 2, 2012 at 19:14
  • 4
    For this to work in a table, you may need to apply the table-layout: fixed; to the table
    – Serj Sagan
    Commented Jan 23, 2014 at 23:27
  • 49
    word-wrap: break-word didn't work for me but word-break: break-word as @rahul suggested below worked.
    – Yves
    Commented Jan 26, 2015 at 9:34
  • 1
    Note: This will work only if you give it in parent div in IE (Not to the inner span inside div).
    – sms
    Commented Mar 23, 2016 at 12:36
  • 7
    @Yves or overflow-wrap: anywhere works for me in table but not sure if everything else is same as wanted
    – Tonoslav
    Commented Mar 3, 2021 at 15:37
181

I am not sure about the browser compatibility

word-break: break-all;

Also you can use the <wbr> tag

<wbr> (word break) means: "The browser may insert a line break here, if it wishes." It the browser does not think a line break necessary nothing happens.

6
  • 34
    Be aware of that word-break: break-all; will break words in the middle if it still can fit any characters on a line with other words before, which might not be desired outcome, while word-wrap: break-word; moves words to a new line and only breaks the word if it is too long to at all fit on it's own line in the container. Example: jsfiddle.net/4AKhn/1
    – alexteg
    Commented Sep 25, 2013 at 16:31
  • 1
    break-all breaks everything. Okay to use with specific class which have long URL etc only, but not with BODY or P
    – Upendra
    Commented May 12, 2014 at 8:56
  • This is definitely perfectly (and desired) acceptable when you are trying to display something like a request URI in a log table cell, and need it to stop breaking the whole table with a giant long cell. Breaking in the middle of a 'word' is wanted ;) While the accepted answer doesn't do squat in this regard. Commented May 6, 2018 at 13:07
  • @Skelly1983 there's no such thing as IE12
    – TylerH
    Commented Oct 29, 2019 at 13:58
  • @TylerH I am aware of this, thanks for pointing this out to me after 3 years. This is listed on w3schools browser support chart for the wbr tag, which lists the support as "Internet Explorer/Edge" and has the version number listed as 12.0, which is in fact the first version of Edge.
    – Skelly1983
    Commented Oct 29, 2019 at 17:52
122

This could be added to the accepted answer for a 'cross-browser' solution.

Sources:

.your_element{
    -ms-word-break: break-all;
    word-break: break-all;

 /* Non standard for webkit */
     word-break: break-word;

    -webkit-hyphens: auto;
       -moz-hyphens: auto;
        -ms-hyphens: auto;
            hyphens: auto;
}
5
  • I got it on Chrome/Opera and Safari, but still didn't got it on Firefox and IE. With this I solved Firefox, but IE is still going over the container (I have a long filename of just alpha-numeric characters). Commented Nov 5, 2014 at 17:44
  • 1
    Hi Kamafeather, i am not sure, but ifitisareallylongfilename you are attemting to break, the whole context (browser,html-css code) might be helpful to help you further more. Perhaps, you could create another question with your situation. Commented Dec 3, 2014 at 19:13
  • Please note that this breaks words in ungrammatical places.
    – user1322720
    Commented May 5, 2015 at 11:25
  • @user1322720 what is an "ungrammatical" place?
    – TylerH
    Commented Oct 29, 2019 at 13:59
  • This seems to be the best answer here. Don't break words when not needed.
    – John T
    Commented Oct 12, 2020 at 5:02
37

I was just Googling the same issue, and posted my final solution HERE. It's relevant to this question too.

You can do this easily with a div by giving it the style word-wrap: break-word (and you may need to set its width, too).

div {
    word-wrap: break-word;         /* All browsers since IE 5.5+ */
    overflow-wrap: break-word;     /* Renamed property in CSS3 draft spec */
    width: 100%;
}

However, for tables, you also need to apply: table-layout: fixed. This means the columns widths are no longer fluid, but are defined based on the widths of the columns in the first row only (or via specified widths). Read more here.

Sample code:

table {
    table-layout: fixed;
    width: 100%;
}

table td {
    word-wrap: break-word;         /* All browsers since IE 5.5+ */
    overflow-wrap: break-word;     /* Renamed property in CSS3 draft spec */
}
3
  • 1
    Thank you for tables solution ;) However, I don't quite understand why break-word can't be used with auto layout. Any suggestion?
    – ondObno
    Commented Oct 1, 2014 at 9:02
  • @ondObno Yeah I'm not sure of the technical reason, but several browsers appear to behave this way. Perhaps it's because super long words mess with all the calculations required to determine the widths of each column.
    – Simon E.
    Commented Oct 1, 2014 at 13:03
  • Setting width: 100%; was the only way to get this working for me on FF and chrome!
    – Putzi San
    Commented Jul 6, 2018 at 14:42
30

&#8203; is the HTML entity for a unicode character called the zero-width space (ZWSP) which is an invisible character which specifies a line-break opportunity. Similarly the hyphen's purpose is to specify a line-break opportunity within a word boundary.

2
  • 1
    Very nice tip! Just for complementing: &#8203; has lower priority than a white-space (i.e. if there's one nearby, the line will break in a white-space instead).
    – CPHPython
    Commented Sep 26, 2016 at 12:24
  • Seems to be the <wbr/> unicode equivalent I was looking for
    – Xenos
    Commented Mar 27, 2019 at 13:09
28

Whitespace is preserved by the browser. Text will wrap when necessary, and on line breaks

.pre-wrap {
    white-space: pre-wrap;
    word-break: break-word;
}

DEMO

td {
   word-break: break-word;
   white-space: pre-wrap;
   -moz-white-space: pre-wrap;      
}

table {
    width: 100px;
    border: 1px solid black;
    display: block;
}
<table>
<tr><th>list</th>
<td>
1.longtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtext
2.breaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreakline
</td>
</tr>
</table>

25

Found that using the following worked across most major browsers (Chrome, IE, Safari iOS/OSX) except Firefox (v50.0.2) when using flexbox and relying on width: auto.

.your_element {
    word-wrap: break-word;   
    overflow-wrap: break-word;
    word-break: break-word;
}

Note: you may need to add browser vendor prefixes if you are not using an autoprefixer.

Another thing to watch out for is text using &nbsp; for spacing can cause line breaks mid-word.

1
  • 5
    This is exactly what I needed. The other solutions didn't work with width: 100%. One thing to note: word-break: break-word; should be word-break: break-all;
    – jscul
    Commented Oct 14, 2017 at 22:30
8

CSS word-wrap:break-word;, tested in FireFox 3.6.3

0
8

Remove white-space: nowrap, if there is any.

Implement:

white-space: inherit;
word-break: break-word;
1
  • It solved a huge problem for me with the search result in Fomanti-UI (categoy>name) Commented May 20, 2022 at 10:31
5

As mentioned in @davidcondrey's reply, there is not just the ZWSP, but also the SHY &#173; &shy; that can be used in very long, constructed words (think German or Dutch) that have to be broken on the spot you want it to be. Invisible, but it gives a hyphen the moment it's needed, thus keeping both word connected and line filled to the utmost.

That way the word luchthavenpolitieagent might be noted as lucht&shy;haven&shy;politie&shy;agent which gives longer parts than the syllables of the word.
Though I never read anything official about it, these soft hyphens manage to get higher priority in browsers than the official hyphens in the single words of the construct (if they have some extension for it at all).
In practice, no browser is capable of breaking such a long, constructed word by itself; on smaller screens resulting in a new line for it, or in some cases even a one-word-line (like when two of those constructed words follow up).

FYI: it's Dutch for airport police officer

4

I solved my problem with code below.

display: table-caption;
1
  • This made a single letter appear on each line after the break for me. Commented Jan 1, 2023 at 20:09
4

word-break: normal seems better to use than word-break: break-word because break-word breaks initials such as EN

word-break: normal
3

From MDN:

The overflow-wrap CSS property specifies whether or not the browser should insert line breaks within words to prevent text from overflowing its content box.

In contrast to word-break, overflow-wrap will only create a break if an entire word cannot be placed on its own line without overflowing.

So you can use:

overflow-wrap: break-word;

Can I use?

3

First you should identify the width of your element. E.g:

#sampleDiv{
  width: 80%;
  word-wrap:break-word;
}
<div id="sampleDiv">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

so that when the text reaches the element width, it will be broken down into lines.

2
.word-break {
   word-break: keep-all;
   word-wrap: break-word;
}
2

I checked in Chrome, Firefox: word-wrap: break-word, overflow-wrap: break-word did not work for me. What works is either:

    overflow-wrap: anywhere;

or option to explore:

    overflow-wrap: break-word;

or

    word-break: break-all;
-1

You can use a grid system for this.

<div class="container" style="background-color: green; width: 200px; height: 300px;">
   <div class="row">Thisisatest.Thisisatest.Thisisatest.</div>
   <div class="row">Thisisatest.Thisisatest.Thisisatest.</div>
 </div>
-2

Do this:

<div id="sampleDiv">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

#sampleDiv{
   overflow-wrap: break-word;
}
-4

just try this in our style

white-space: normal;
2
  • 1
    Duplicating answers across multiple questions is frowned-upon in most cases. In this case, it seems to be an incorrect answer to both questions. normal is the default white-space value. I think that adding it would have no effect on the example in the question. Please correct me if I'm mistaken. Commented May 15, 2015 at 0:51
  • It depends on the override made by the CSS. On my case, i had to redeclare it on "style" in my JSF component to override the default CSS style that was not "white-space: normal;" Commented May 19, 2015 at 7:46

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