如何模仿断言:断言; 适用于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;

在所有浏览器中包装.在大多数情况下,最大宽度不是必需的.

Answer 2

用于display:table-caption实现您正在寻找的东西。

现场演示

HTML：

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

CSS：

#theSpan{
  display:table-caption;
}

希望这可以帮助。