如何在IE9、IE11和Firefox中模拟word-break: break-word;效果

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;。“产品支持”文本是动态的。

更新：
我有一个带有id为grid2的固定宽度的div。在一种语言中，翻译后的文本太长了，它是一个单词，会溢出grid2 div。

代码已更新。

- Sudhansu Choudhary

---

请问您可以添加一个简单的实时演示吗？因为我认为当前上面的例子不需要设置任何断词规则。 - Stickers

@Pangloss 是的，针对这个特定的网格，我明白它并不需要，但是当我在一个网格中有一个很长的单词时，问题就出现了，因为跨度(span)中的文本会溢出(div)。谢谢你的建议。我将添加一个演示并稍后通知您。 - Sudhansu Choudhary

Answer 1

我在Chrome、Firefox和IE中已经取得了很好的成功，只使用了：

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

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

display: table-cell;

最终我不得不包含

max-width: 440px;

为了在所有浏览器中获得自动换行。 在大多数情况下，max-width并不是必要的。

- Darren Reimer

---

“word-break: break-word;” 只在 Blink/Webkit 中有效，因此无法在 IE11 上使用。 - Pumych

Answer 2

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

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

- Pavel Kolmogorov

---

它在IE11上并不起作用。 - aleyush

Answer 3

使用display:table-caption可以实现您想要的效果。

LIVE DEMO

HTML代码：

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

CSS：

#theSpan{
  display:table-caption;
}

希望这能有所帮助。

- Nitesh

---

嘿，忘了提一件事，我有一个固定宽度的带有id为“grid2”的div。在其中一种语言中，翻译后的文本太长了，是一个单词，它会溢出grid2 div。我也会更新问题。感谢您的回答。 - Sudhansu Choudhary

我理解，如果文本是单个单词且过长，则其中一种语言会出现问题。在这种情况下，由于div的固定宽度，span中的文本会溢出div。 - Sudhansu Choudhary

如果你有一个单词 asdfsdfsdfsadfsadf dsfsad，那么第二个单词将在两个浏览器中都被省略。但是，如果你有单词 dsfsadfsdfsadfsdafsfsfsfsafsdfsafsadfsadfsdaf，无论你从上面尝试什么，它都只会呈现为一个单词，对于任何浏览器都是如此。 - Nitesh

如果我使用word-break: break-word;，即使是非常长的单词文本，在Chrome中也能正常工作。有趣！ - Sudhansu Choudhary

这对我起作用了。我不知道为什么会被投票否决。 - Umang Gupta