How to imitate a break-word: a broken word; for IE9, IE11 and Firefox

Question

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

It seems to work in Chrome. I found out and realized that this is a non-standard, webkit.

FYI, I tried to use

 white-space: pre-wrap; 

And a bit more,

  overflow-wrap: break-word; 

Also tried the CSS below,

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

But they do not seem to work.

I cannot provide a fixed range width (which contains text) by making it display: block; explicitly, since the text is dynamic and will differ depending on the geographic location of the user. We currently support about 18 languages.

This is what the code looks like,

html

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

CSS

 #theSpan{ white-space: pre-wrap; /* CSS3 */ white-space: -moz-pre-wrap; /* Firefox */ white-space: -pre-wrap; /* Opera 7 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* IE */ word-break: break-all; } #grid2{ width: 100px; } 

Looks like,

I want it to be

Note:
I had to use word-break: break-all; because for some languages ​​the translated text is too long and it overflows from the grid. The text "Product Support" is dynamic.

Update:
I have a fixed width for a div with id, grid2. In one of the languages, the translated text is too long, this is one word, and it follows from the grid2 div.

Updated code.

Answer 1

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

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

In my problematic case, I already used:

 display: table-cell; 

and I had to turn it on

 max-width: 440px; 

to get packaging in all browsers. In most cases, the maximum width is not needed.

Answer 2

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

Live demo

HTML:

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

CSS:

 #theSpan{ display:table-caption; } 

Hope this helps.