Как я могу сделать Word-break Firefox с помощью CSS?

Это мой код:

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

Однако

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

не является полезным, поскольку он не может переносить слова в Firefox. Что я могу сделать, используя 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;

Вышеупомянутый фрагмент кода отлично работает для меня

Ответ 2

Используйте следующие правила вместе:

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

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

Ответ 3

Вы должны применить ниже класс css в div:

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

И добавьте ниже стиль в таблице, который является связыванием в div

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

Он будет работать на IE7, FF 3.6 и Chrome.

Ответ 4

вы используете свойства ширины и отображения вместе со свойством word-wrap:

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

Он работает для меня как в IE, так и в FF.

Ответ 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;

Похоже, переполнение - это что-то новое в Firefox. Более подробную информацию можно найти здесь:

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

Ответ 7

Об этом мы советуем:

div{ overflow-wrap:break-word; }

Ответ 8

word-break: break-word прекращено. Вы должны использовать: word-break: normal; overflow-wrap: anywhere word-break: normal; overflow-wrap: anywhere

Ответ 9

Мне нужно было сочетание нескольких ответов, чтобы заставить его работать в Chrome и Firefox:

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

Ответ 10

Используйте приведенные ниже стили, они отлично помогли мне в Mozilla Firefox.

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