如何模仿断字：break-word； 适用于 IE9、IE11 和 Firefox

Question

如何模仿word-break: break-word; 适用于 IE9、IE11 和 Firefox？

它似乎适用于 Chrome。 我了解到并理解它是一个非标准的，仅 webkit。

仅供参考，我试过使用，

white-space: pre-wrap;

还有一些像，

   overflow-wrap: break-word;

还尝试了下面提到的 CSS，

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

但这些似乎都不起作用。

我无法通过display: block; 明确地，因为文本是动态的，并且会根据用户的地理位置而有所不同。 目前我们支持大约 18 种语言。

这是代码的样子，

的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 不是必需的。

Answer 2

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

这应该适用于 IE11，但不适用于 IE9

Answer 3

使用display:table-caption来实现您正在寻找的内容。

现场演示

HTML：

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

CSS：

#theSpan{
  display:table-caption;
}

希望这可以帮助。