web-dev-qa-db-ja.com

CSSでFirefoxをワードブレークするにはどうすればよいですか？

これはこれまでの私のコードです：

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

しかしながら、

Word-wrap:break-Word;
Word-break:break-all;

firefoxでワードラップできないため、有用ではありません。 CSSを使用して何ができますか？

cssfirefoxword-wrap
42
zjm1126
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;

上記のコードは私のために素晴らしく機能します

55
2lessons

以下の規則を一緒に使用します。

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

/* For Chrome and IE */
Word-wrap: break-Word;
30
gsklee

Divに以下のcssクラスを適用する必要があります。

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

そして、divにバインドされているテーブルに以下のスタイルを追加します

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

IE7、FF 3.6、Chromeで動作します。

18
Pankaj Pareek

幅と表示プロパティをワードラッププロパティと一緒に使用します。

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

私にとっては、IEとFFの両方で機能します。

11
Lida

firefoxでは次のように機能します。

Word-break: initial;
Word-wrap: break-Word;
9
Mau

私にとってはうまくいく：

/* 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

6
Kaloyan Stamatov

これを試してみましょう：

div{ overflow-wrap:break-Word; }
2
darcher

Word-break: break-Wordは非推奨です。使用する必要があります：Word-break: normal; overflow-wrap: anywhere

0
Uğur Mutlu

ChromeとFirefoxの両方で動作するようにするには、いくつかの回答の組み合わせが必要でした。

.white-space-pre-wrap {
  white-space: pre-wrap;
  Word-break: break-all;
  Word-wrap: break-Word;
  display: inline-block;
}
0
carmenism