In order to ensure that the answer is obvious to people visiting this question in the future: the OP (wesley) answered the question himself in the comments beneath the question:

The cause of the problem is that Internet Explorer 11 makes textarea elements inherit whatever white-space property is applied to the direct parent.

The resolution is to apply white-space: pre-wrap to the textarea, as identified by Jean-François Beauchamp.

I have had good success in Chrome, Firefox and IE with using only:

word-break: break-word;
word-wrap: break-word;

In my problem case I was already using:

display: table-cell;

and I ended up having to include

max-width: 440px;

to get wrapping in all browsers. In most cases the max-width was not necessary.

Use your CSS like this.

word-break: break-word; /* Chrome, Safari */
word-wrap: break-word; /* IE11, Firefox */

For a similar issue, I used display: inline-block on the <a> tag, which seems to help. And word-break: break-all as I was concerned with long URLs not wrapping.

So, this in your case essentially...

.tab_title a {
    display: inline-block;
    word-break: break-all;
} 

you need to have

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

and put word-wrap in table,td,th not into span

http://jsfiddle.net/d6VsD/7/

You can use below css instead of yours:

.spanClass {
  display: inline-block;
  word-wrap: break-word;
  word-break: break-all;
 }

Add the following into your style sheet:

wbr:after { content: "\00200B"; }

This inserts U+200B ZERO WIDTH SPACE, which is the character-level counterpart of the good old <wbr> that browsers have largely spoiled (a sad story).

Alternatively, you can replace <wbr> tags by that character, which you can write in HTML as ​.

Actually word-wrap: break-word; isn't always the good solution while breaking overflowing sentences. As it breaks the words of the sentence which remove the actual meaning of the word OR better to say make it unreadable.

So while using word-wrap: break-word; try considering white-space: pre-wrap; which only breaks the sentence the meaningfully that means the word accessibility can break into

access
ibility

but if we use white-space: pre-wrap; it will always give you

accessibility

Here I've created a JSFiddle.

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

Hope it will work for you.

I haven't looked at your site, but it looks like you need to add the -ms-hyphens prefix to your css. You have the -webkit and -moz but no -ms:

-ms-hyphens: none;

See here for more info: http://msdn.microsoft.com/en-us/library/ie/hh771871(v=vs.85).aspx

Also, after looking into it a bit more, it looks like Opera doesn't support this, and neither do most mobile browsers: http://caniuse.com/css-hyphens - Just a heads up in case you come across that down the road.