如何使用 CSS 使 Firefox 分词？答案

【问题标题】：How can I make Firefox word-break with CSS?如何使用 CSS 使 Firefox 分词？
【发布时间】：2011-05-16 00:41:09
【问题描述】：

这是我目前的代码：

<div style="width:100px;height:100px;background:red">
            ssssssssssssssssssssssssssssssssssssss
</div>

然而，

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

没有用，因为它不能在 Firefox 上自动换行。 我能用 CSS 做什么？

【问题讨论】：

你用的是哪个版本的FF？ jsfiddle.net/xUwkF 这是在 FF 3.6 上工作
hacks.mozilla.org/2009/06/word-wrap

标签： css firefox word-wrap

【解决方案1】：

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+ */
width:200px;

上面的代码非常适合我

【讨论】：

为什么宽度很关键？是否可以让它使用容器的宽度？
它对我有用，我必须添加空格：pre-wrap !important;
如果元素有 display:flex 则不工作。根据规范，它应该像那样工作，他们在错误报告中说bugzilla.mozilla.org/show_bug.cgi?id=1136818
我花了半个工作日忙于一些跨浏览器兼容的 css 样式，这是第一个真正解决我的问题的解决方案。赞！！
您现在可以使用overflow-wrap: break-word 代替word-wrap，参见developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap

【解决方案2】：

以下规则一起使用：

/* For Firefox */
white-space: pre-wrap;
word-break: break-all;

/* For Chrome and IE */
word-wrap: break-word;

【讨论】：

pre-wrap 属性会在 Chrome 上创建额外的空白
Chrome 不响应word-wrap，只响应word-break。

【解决方案3】：

您必须在 div 上应用以下 css 类：

.content-div{
    word-break:break-all;
    word-wrap: break-word;
}

并在 div 中绑定的表格上添加以下样式

style='table-layout:fixed;width:306px;'

它适用于 IE7、FF 3.6 和 Chrome。

【讨论】：

@Andrej：您应该提供一个链接 - 答案的顺序取决于投票或您自己选择的顺序。
它对我有用，我有一个具有这些样式的类，我已将该类添加到 p、a、div 和引导程序的 4 列内的其他标签

【解决方案4】：

您将 width 和 display 属性与 word-wrap 属性一起使用：

width: 100px;
word-wrap: break-word;
display:inline-block;

它在 IE 和 FF 中都适用于我。

【讨论】：

出于某种原因，我需要 FF 中的 display:inline-block
为什么宽度很关键？是否可以让它使用 div 的宽度？

【解决方案5】：

它在 Firefox 上是这样工作的：

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

【讨论】：

【解决方案6】：

这对我很有效：

/* For Firefox */
white-space: pre-wrap;
overflow-wrap: break-word;

/* For Chrome and IE */
word-wrap: break-word;

看起来overflow-wrap 是firefox 中的新东西。更多信息可以在这里找到：

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap

【讨论】：

"该属性最初是一个名为word-wrap 的非标准且无前缀的Microsoft 扩展，由大多数同名浏览器实现。此后它已重命名为overflow-wrap，带有@ 987654325@ 是别名。"
看起来只使用 For Firefox 部分在 Firefox 和 Chrome 中都能正常工作。

【解决方案7】：

我们试试这个怎么样：

div{ overflow-wrap:break-word; }

【讨论】：

【解决方案8】：

我需要几个答案的组合才能让它在 Chrome 和 Firefox 中为我工作：

.white-space-pre-wrap {
  white-space: pre-wrap;
  word-break: break-all;
  word-wrap: break-word;
  display: inline-block;
}

【讨论】：

【解决方案9】：

word-break: break-word 已弃用。你应该使用： word-break: normal; overflow-wrap: anywhere

【讨论】：

【解决方案10】：

对我来说很好用：

  /* Mozilla fix */
  word-break: break-all;

  /* Chrome fix */
  word-break: break-word;
  word-wrap: break-word;
  overflow-wrap: break-word;

【讨论】：

【解决方案11】：

在 mozilla firefox 中使用以下对我来说效果很好的样式。

word-wrap: break-word;
display:block;

【讨论】：