如何使用 CSS 使 Firefox 断字？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4282757/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I make Firefox word-break with CSS?
提问by zjm1126
This is my code so far:
到目前为止，这是我的代码：
<div style="width:100px;height:100px;background:red">
ssssssssssssssssssssssssssssssssssssss
</div>
However,
然而，
word-wrap:break-word;
word-break:break-all;
does not prove useful, since it can't word-wrap on Firefox. What can I do, using CSS?
没有证明是有用的，因为它不能在 Firefox 上自动换行。 使用 CSS 可以做什么？
回答by Swadesh Behera
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;
The above piece of code works for me wonderfully
上面这段代码非常适合我
回答by gsklee
Use the following rules together:
一起使用以下规则：
/* For Firefox */
white-space: pre-wrap;
word-break: break-all;
/* For Chrome and IE */
word-wrap: break-word;
回答by Pankaj Pareek
You have to apply the below css class on div:
您必须在 div 上应用以下 css 类：
.content-div{
word-break:break-all;
word-wrap: break-word;
}
And add below style on table which is bind in div
并在表中添加以下样式，该样式绑定在 div 中
style='table-layout:fixed;width:306px;'
It will work on IE7, FF 3.6 and Chrome.
它适用于 IE7、FF 3.6 和 Chrome。
回答by Lida
you use width and display properties together with word-wrap property:
您将宽度和显示属性与自动换行属性一起使用：
width: 100px;
word-wrap: break-word;
display:inline-block;
It works for me both in IE and in FF.
它在 IE 和 FF 中都适用于我。
回答by Mau
it works this way for Firefox:
它适用于 Firefox：
word-break: initial;
word-wrap: break-word;
回答by Kaloyan Stamatov
That work for me nicely:
这对我来说很好：
/* For Firefox */
white-space: pre-wrap;
overflow-wrap: break-word;
/* For Chrome and IE */
word-wrap: break-word;
It looks overflow-wrap is something new in firefox. More info can be found here:
看起来overflow-wrap 是firefox 中的新东西。更多信息可以在这里找到：
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap
回答by darcher
Hows about we try this:
我们试试这个怎么样：
div{ overflow-wrap:break-word; }
回答by U?ur Mutlu
word-break: break-wordis deprecated. You should use:
word-break: normal; overflow-wrap: anywhere
word-break: break-word已弃用。你应该使用：
word-break: normal; overflow-wrap: anywhere
回答by carmenism
I needed a combination of several answers to get it to work in both Chrome and Firefox for me:
我需要结合几个答案才能让它在 Chrome 和 Firefox 中为我工作：
.white-space-pre-wrap {
white-space: pre-wrap;
word-break: break-all;
word-wrap: break-word;
display: inline-block;
}
回答by Ramya
Use the below styles it worked fine for me in mozilla firefox.
使用以下样式在 mozilla firefox 中对我来说效果很好。
word-wrap: break-word;
display:block;
