How can I make Firefox word-break with CSS?

问题

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?

回答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;

The above piece of code works for me wonderfully

回答2:

Use the following rules together:

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

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

回答3:

You have to apply the below css class on div:

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

And add below style on table which is bind in div

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

It will work on IE7, FF 3.6 and Chrome.

回答4:

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.

回答5:

it works this way for Firefox:

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

回答6:

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:

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

回答7:

Hows about we try this:

div{ overflow-wrap:break-word; }

回答8:

word-break: break-word is deprecated. You should use: word-break: normal; overflow-wrap: anywhere

回答9:

I needed a combination of several answers to get it to work in both Chrome and Firefox for me:

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

回答10:

Use the below styles it worked fine for me in mozilla firefox.

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

来源：https://stackoverflow.com/questions/4282757/how-can-i-make-firefox-word-break-with-css

标签

css

firefox

word-wrap