开发者

How can I make Firefox word-break with CSS?

开发者 https://www.devze.com 2023-01-27 05:19 出处:网络
This is my code so far: <div style=\"width:100px;height:100px;background:red\"> ssss开发者_开发百科ssssssssssssssssssssssssssssssssss

This is my code so far:

<div style="width:100px;height:100px;background:red">
            ssss开发者_开发百科ssssssssssssssssssssssssssssssssss
</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?


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


Use the following rules together:

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

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


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.


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.


it works this way for Firefox:

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


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


Hows about we try this:

div{ overflow-wrap:break-word; }


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


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


It works fine for me:

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

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


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

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

精彩评论

暂无评论...
验证码 换一张
取 消