Word wrap not working

Okay so I know this is an old question but I seriously think there could be some useful clarification of when to use which property. Looking at the existing answers, I feel they offer solutions without explanation so here is my attempt to help with that. For context, by default, the container will not try to break a single long word up because it wants to preserve the word in it’s original form.

With that said, 3 main ways to break up words there is overflow-wrap, word-break, and hypens. I won’t dive too deep into hypens though.

So first off. I see word-wrap is being used in the question but reading the documentation, that is deprecated and some browsers have decided to simply alias it to overflow-wrap. It’s probably preferred not to use that.

The distinction between the two properties is pretty clear in the documentation but for clarity, overflow-wrap really only has two possible values and will detect if a word has been overflowed. If it does, by default it moves the entire word to the next line. If break-word is set, it will only break up the word if the entire word couldn’t be placed on that line.

#fos { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size:14px;
    font-weight: normal;
    line-height: 18px;
    width: 238px;
    height:38px;
    cursor: pointer;
    overflow-wrap: break-word;
    border:2px solid; }
#sp { }

<div id="fos">
<span id="sp">The longest word ever: pneumonoultramicroscopicsilicovolcanoconiosis and then some.</span>  
</div>

You can see the pneumonoul… long word breaks exactly where it needs to on the next line after it attempts to separate the long word.

Now in contrast, we have word-break. This has more granular properties and actually also has a break-word option. This is synonymous to the above snippet so when to use one or the other I think is pretty trivial.

However, word-break also offers a break-all value which will break the word whenever possible to fit word where it was originally intended. It doesn’t try to figure out if it needs the word to be on a new line or not — it simply shoves the line break where it overflows. The biggest distinction here from the above is that long word we use is now still on the top.

#fos { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size:14px;
    font-weight: normal;
    line-height: 18px;
    width: 238px;
    height:38px;
    cursor: pointer;
    word-break: break-all;
    border:2px solid; }
#sp { }

<div id="fos">
<span id="sp">The longest word ever: pneumonoultramicroscopicsilicovolcanoconiosis and then some.</span>  
</div>

And then finally for hyphens have their own special way of breaking up words. For more info take a look at the documentation. Also worth noting that different languages have different ways of breaking up words but fortunately the hyphens property hooks into the lang attribute and understands what to do.

Another option people have suggested is using the white-space property which attempts to break up text through spaces. In the example I used, this doesn’t help our situation because the word itself is longer than the container. I think the important thing to note about this CSS property is that this doesn’t attempt to break up words within themselves and rather tries to do it via spaces whenever appropriate.

#fos { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size:14px;
    font-weight: normal;
    line-height: 18px;
    width: 238px;
    height:38px;
    cursor: pointer;
    white-space: normal;
    border:2px solid; }
#sp { }

<div id="fos">
<span id="sp">The longest word ever: pneumonoultramicroscopicsilicovolcanoconiosis and then some.</span>  
</div>

Hope this helps.

If you are attempting to wrap very long words or hyperlinks within a narrow container, you may experience text overflowing when viewing your results in IE11. This may happen despite using the CSS declaration word-wrap: break-word; in IE 11, but looks fine in other browsers. See below:

There are ways of handling long words and URLs using forced breaks, hyphenation, ellipsis, etc). See the terrific article here on the CSS Tricks website: https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/

What if you do not want a hyphen or ellipsis to appear? Using word-wrap: break-word; overflow-wrap: break-word; word-break: break-all; word-break: break-word; or even the Microsoft CSS Browser Prefix declaration -ms-word-break: break-all;, may not work. It didn’t for me.

The solution, using the HTML, ZERO-WIDTH-SPACE Unicode Character ​.

CSS

#container { 
  width: 120px;
  background-color:#ccc;
  border: 1px solid #aaa;
  margin: 50px 50px 0;
}

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

HTML

<div id="container">
  <p>Donec sit amet erat porta, rhoncus dolor nec, <span class="break">scelerisqueaghtr​afdssf</span> accumsan leo. Phasellus eu ipsum aliquam, <a class="break" href="www.samplewebsite.com/reallylongurl">www.reallylong​websiteurl​.com/reallylongurl</a> rutrum orci a, pulvinar elit. Aenean auctor dignissim tempus.</p>
</div>

You have to insert the unicode character whereever you want the breaks to occur. See the final result below.

Answer by Alberto Curtis

When I’m using word-wrap:break-word with Browser Mode: IE9 Compatibility View and Document Mode: IE7 standards its working perfectly fine. However when I change the Document Mode: IE9 standards, its not working.
I’ve also tried using -ms-word-wrap:break-word however its giving me the same result.,it should work, .your_class_name{word-break:break-word;}, i have tested it in ie7 — ie9 and it breaks the word…,Adding -ms-word-break: break-word; worked for me.,

Stack Overflow for Teams
Where developers & technologists share private knowledge with coworkers

you need to have

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

Answer by Bellamy Shepherd

The solution, using the HTML, ZERO-WIDTH-SPACE Unicode Character ​.,If you are attempting to wrap very long words or hyperlinks within a narrow container, you may experience text overflowing when viewing your results in IE11. This may happen despite using the CSS declaration word-wrap: break-word; in IE 11, but looks fine in other browsers. See below:,There are ways of handling long words and URLs using forced breaks, hyphenation, ellipsis, etc). See the terrific article here on the CSS Tricks website: https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/,What if you do not want a hyphen or ellipsis to appear? Using word-wrap: break-word; overflow-wrap: break-word; word-break: break-all; word-break: break-word; or even the Microsoft CSS Browser Prefix declaration -ms-word-break: break-all;, may not work. It didn’t for me.

CSS

#container { 
  width: 120px;
  background-color:#ccc;
  border: 1px solid #aaa;
  margin: 50px 50px 0;
}

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

HTML

<div id="container">
  <p>Donec sit amet erat porta, rhoncus dolor nec, <span class="break">scelerisqueaghtr​afdssf</span> accumsan leo. Phasellus eu ipsum aliquam, <a class="break" href="www.samplewebsite.com/reallylongurl">www.reallylong​websiteurl​.com/reallylongurl</a> rutrum orci a, pulvinar elit. Aenean auctor dignissim tempus.</p>
</div>

Answer by Ila Perez

-max-content it is not supported by IE, according to CanIuse.,So I created a fallback for IE that might help you, by setting .button to display:inline-block:,It’s working, but I don’t want to display the elements inline.,The CSS word-wrap: break-word; works only in display:block; or display:inline-block; elements so you can just use:

I have a small css script that force <a> tag word-wrap in a div. It worked fine on FF, Chrome but didn’t work on IE9. How can I fix it?

.tab_title a{
    word-wrap: break-word;
} 

Answer by Kairi Buck

Note: 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.,Report a problem with this content on GitHub,This example compares the results of overflow-wrap, word-break, and hyphens when breaking up a long word.,Browser compatibility

/* Keyword values */
overflow-wrap: normal;
overflow-wrap: break-word;
overflow-wrap: anywhere;

/* Global values */
overflow-wrap: inherit;
overflow-wrap: initial;
overflow-wrap: revert;
overflow-wrap: unset;

Answer by Nash Miller

Also ran into this issue with the ML anomalies table, where fields like job IDs cannot contain spaces, so long values will overflow the cells in Firefox and Edge.,
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
,This property is being used a couple of times for tables to prevent content from overflowing. Works in Chrome:,@cchaos Reopening — fallback styles in #864 doesn’t seem to have been applied to the word-break property on table cells (screenshot on IE11):

Add fallback to just break-all in FF and IE

Answer by Ariya Abbott

It doesn’t work in IE 8 and 9. Do you have any suggestions for IE 8 and 9 for word-wrap: break-word; ?,I’m sorry that last code is working for me in IE8 at the moment…. but not in IE9. I rechecked,for me it does not seem’s to work on Chrome and firefox.,word wrap is not working in this website in firefox

The word-wrap property accepts two values, one of which is the default:

.selector {
  word-wrap: normal; /* the default */
}

.selector-2 {
  word-wrap: break-word;
}