word-break 的解决方案：在 Firefox 中打破所有样式？

Posted 2023-03-06

【中文标题】word-break 的解决方案：在 Firefox 中打破所有样式？

【英文标题】：Solution for word-break:break-all styling in firefox?

【发布时间】：2012-01-25 07:42:00

【问题描述】：

我正在尝试将文本包装在 td 中并使用以下样式

word-break:break-all

在 IE 中运行良好，但在 Firefox 中失败，请阅读不支持！ 尝试了http://petesbloggerama.blogspot.com/2007/02/firefox-ie-word-wrap-word-break-tables.html 中给出的解决方案。似乎也没有用，有什么解决办法吗？

谢谢， 阿达什

【问题讨论】：

博客中的解决方案非常适合我。

我尝试在 td 级别应用 HardBreak 类，但没有成功，你就是这样做的吗？

是的，我只在 td 中添加了类名，仅此而已。

【参考方案1】：

我终于也遇到了一些麻烦。但我设法让它工作：

.hardBreak 
  white-space: pre-wrap; /* css-3 */
  white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
  white-space: -pre-wrap; /* Opera 4-6 */
  white-space: -o-pre-wrap; /* Opera 7 */
  word-wrap: break-word; /* Internet Explorer 5.5+, 6, 7, 8 compability-mode */
  -ms-word-break: break-all; /* Internet Explorer 8 */

我希望这会有所帮助。

在 IE8 本机模式下需要最后一个选项。这对我有用，并在 FF8、IE 7、8compability、8native、Chrome 中进行了测试。

【讨论】：

Aword-break: break-all;nswer 变老了..因为它出现在 Google 搜索中，我建议用新信息更新它：现在 word-break: break-all; 在 Firefox 中工作, 也是:)

【参考方案2】：

自动换行仅适用于 inline-block 或 block 元素。所以，你必须改变你的元素类型。喜欢：

.example 
  display: inline-block;
  word-break: break-all;

【讨论】：

好点。我这边有这个问题并用内联块修复。谢谢。

【参考方案3】：

使用 word-wrap：断词； 一定会成功的！！

【讨论】：

给出你的答案的代码并尽量简短。

【参考方案4】：

有

display : block;

没关系

【参考方案5】：

我认为你提到的解决方案已经有一段时间没有奏效了；它可能（不经意间？）在过去的一些 Firefox 版本上工作过，但它看起来不像是可以完成这项工作的（不应该指望pre-wrap 会说话）。

让 Firefox 将一个点视为允许的直接换行机会的方法是 <wbr> 标记 — 不在任何规范中，但得到广泛支持。通常最好将它插入到 合适的 点，但在极端情况下，您甚至可以将它放在任意两个字符之间（假设您会使用预处理、服务器端脚本或客户端javascript 来做到这一点）。

【参考方案6】：

试试这个：

word-wrap:break-word

它应该适用于所有浏览器（只要您在应用它的 div/cell 上具有固定宽度...

【讨论】：

如果您发布实际的 HTML，我可以看看。你的td标签有固定宽度吗？