解决Firefox中word-break: break-all样式的问题？

Question

解决Firefox中word-break: break-all样式的问题？

6

我正在尝试将文本包装在一个td中，使用以下样式：

word-break:break-all

在IE中完全正常，但在Firefox中失败了，读到这不被支持！尝试了http://petesbloggerama.blogspot.com/2007/02/firefox-ie-word-wrap-word-break-tables.html中给出的解决方案。似乎也没有起作用，有什么解决方法吗？

谢谢， Adarsh

- KeenUser

博客中的解决方案对我来说完美地起作用了。 - fyr

我尝试在 td 层级上应用 HardBreak 类，但它没有起作用，这就是你所做的全部吗？ - KeenUser

是的，我只是将类名添加到了 td 中，就这样。 - fyr

6个回答

4

word-wrap属性只适用于inline-block或block元素。因此，您需要更改元素类型，例如：

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

- Matheus Carmo

好的观点。我这边也遇到了这个问题，通过使用inline-block解决了。谢谢。 - Kun Andrei

1

使用 word-wrap: break-word; 就可以了！

- Shubham Gupta

1

请在回答中提供代码，并简要说明。 - Sulthan Allaudeen

1

使用 display : block; 是可以的。

- Cyril

0

我认为你提到的解决方案已经有一段时间没有起作用了；它可能在某些过去版本的Firefox上（无意中？）起作用，但它似乎不是可以期望完成工作的方案（pre-wrap不应该被期望打破单词）。

让Firefox将一个点视为可接受的直接换行机会的方法是使用<wbr>标签——虽然不在任何规范中，但得到了广泛支持。通常最好在适当的位置插入它，但在极端情况下，甚至可以将其放置在任何两个字符之间（假定您将使用预处理、服务器端脚本或客户端JavaScript来完成此操作）。

- Jukka K. Korpela

0

试试这个替代方案：

word-wrap:break-word

它应该在所有浏览器中工作（只要您在应用它的div/cell上有一个固定的宽度...

- Fred

1

如果您发布实际的HTML代码，我可以检查一下。您在td标签上有固定的宽度吗？ - Fred

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- fyr · Accepted Answer

我最终也遇到了一些问题，但是我设法让它工作：

.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、IE7、8兼容模式、8原生模式和Chrome中测试过。