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

Posted 2023-03-05

【中文标题】如何模仿断词：break-word；适用于 IE9、IE11 和 Firefox

【英文标题】：How to mimic word-break: break-word; for IE9, IE11 and Firefox

【发布时间】：2016-04-04 14:07:22

【问题描述】：

如何在 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 中流出。

也更新了代码。

【问题讨论】：

你能添加一个简单的现场演示吗？因为我认为不需要为上面的当前示例设置任何分词规则。

@Pangloss 是的，对于这个特定的网格，我知道它不是必需的，但是当我在其中一个网格中有一个长单词时出现问题，其中跨度中的文本溢出了 div。谢谢你的建议。将添加演示并尽快通知您。

【参考方案1】：

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

LIVE DEMO

HTML：

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

CSS：

#theSpan
  display:table-caption;

希望这会有所帮助。

【讨论】：

嘿，忘了提一件事，我为 id 为grid2 的 div 设置了固定宽度。在其中一种语言中，翻译的文本太长，它是一个单词，它从 grid2 div 中流出。我也会更新问题。谢谢你的回答。

根据您的问题，我上面的答案将类似于您正在寻找的break-word 效果。即使你有一个固定的宽度，字符也会像你想要的那样被破坏。

我了解，如果文本是单个单词并且对于其中一种语言来说太长，则会出现问题。在这种情况下，由于 div 的固定宽度，span 中的文本会流出 div。

是的。我同意你的观点，但如果我输入word-break: break-word;，它在 Chrome 上可以完美运行。如，如果网格中有两个单词，它会正确损坏，如问题中的第二张图片所示。此外，从 div 溢出的较长文本也没有问题。因此标题为“如何模仿断词：断词；适用于 IE9、IE11 和 Firefox”:) 嘿，使用 div 而不是 span 来保存文本怎么样？想知道这是否有帮助。我会试试的。

如果我有word-break: break-word;，即使是很长的单字文本，它也能正常工作。有趣！

【参考方案2】：

我在 Chrome、Firefox 和 IE 中仅使用以下工具就取得了很好的成功：

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

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

display: table-cell;

我最终不得不包括

max-width: 440px;

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

【讨论】：

分词：断词；仅适用于眨眼/webkit，所以对我来说在 IE11 中不起作用

【参考方案3】：

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

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