Как сделать Firefox с помощью CSS?

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

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

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

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

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

Это будет работать на IE7, FF3.6 и Chrome.

Answer 4

вы используете свойства width и display вместе со свойством word-wrap:

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

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

Answer 9

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

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