How To Mimic Word-break: Break-word; For Ie9, Ie11 And Firefox

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, webkit only. FYI, I have tri

Solution 1:

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.

Solution 2:

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

This should work for IE11, but not for IE9

Solution 3:

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.