html - 如何模仿断字 : break-word; for IE9, IE11 和 Firefox

Question

如何在IE9、IE11和Firefox中模仿word-break: break-word;？

它似乎在 Chrome 中工作。我了解到并理解它是一个非标准的，仅 webkit。

仅供引用，我已经尝试使用，

white-space: pre-wrap;

还有一些，

   overflow-wrap: break-word;

还尝试了下面提到的 CSS，

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

但是这些好像都不管用。

I can't provide fixed width to the span(which contains the text) by making it display: block; explicitly as the text is dynamic and will differ according to the user's Geo-location. Currently we support around 18 languages.

代码是这样的

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;
}

看起来是这样的

我希望它像，

请注意:
我不得不使用 word-break: break-all; 至于某些语言，翻译的文本太长，溢出了网格。 “产品支持”文本是动态的。

更新:
我有一个固定宽度的 div，id 为 grid2。在其中一种语言中，翻译文本太长，它是一个单词，并且从 grid2 div 中流出。

也更新了代码。

Answer 1

我在 Chrome、Firefox 和 IE 中取得了成功，只使用了:

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

在我的问题案例中，我已经在使用:

display: table-cell;

最后我不得不包括

max-width: 440px;

在所有浏览器中进行换行。在大多数情况下，max-width 不是必需的。