如何使用 CSS 使 Firefox 断字？

Question

到目前为止，这是我的代码：

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

但是，事实

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

证明没有用，因为它无法在 Firefox 上自动换行。 使用 CSS 我能做什么？

Answer 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;

上面的代码对我来说非常有用

Answer 2

一起使用以下规则：

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

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

Answer 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。

Answer 4

您将宽度和显示属性与自动换行属性一起使用：

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

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

Answer 5

对于 Firefox，它的工作方式如下：

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

Answer 6

这对我来说很好用：

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

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

看起来溢出换行是 Firefox 中的新功能。
更多信息可以在这里找到：

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

Answer 7

我们试试这个怎么样：

div{ overflow-wrap:break-word; }

Answer 8

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

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

Answer 9

word-break：break-word 已弃用。你应该使用：
断字：正常；溢出换行：任何地方

Answer 10

它对我来说效果很好：

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

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

Answer 11

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

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