How to mimic word-break: break-word; for IE9, IE11 and Firefox

Question

How to mimic word-break: break-word; for IE9, IE11 and Firefox?

It seems to work in Chrome. I have learnt and understood that it is a is non-standard, webki

Answer 1

Use display:table-caption to achieve what you are looking for.

LIVE DEMO

The HTML:

<div id="grid2">
     <span id="theSpan">Product Support</span>
</div>

The CSS:

#theSpan{
  display:table-caption;
}

Hope this helps.

Answer 2

#grid2{
    white-space: pre-wrap;
    word-wrap: break-word;
}

This should work for IE11, but not for IE9

Answer 3

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.