如何模仿断言：断言;对于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;

但这些似乎不起作用。

  

我无法通过明确指定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;作为翻译文本太长而且溢出网格的一些语言。文字＆＃39;产品支持＆＃39;是动态的。

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

也更新了代码。

Answer 1

我在Chrome，Firefox和IE上取得了很好的成功，仅使用：

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

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

display: table-cell;

我最终不得不包括

max-width: 440px;

在所有浏览器中进行包装。在大多数情况下，最大宽度不是必需的。

Answer 2

使用display:table-caption来实现您的目标。

<强> LIVE DEMO

HTML：

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

CSS：

#theSpan{
  display:table-caption;
}

希望这有帮助。

Answer 3

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

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