3

word-breakなどの特定のインライン要素のプロパティを変更して、ページのコンテンツの流れを改善しよう<span>としています。<a>

Firefox はブロックとして表示される要素 ( など<div>) の word-break プロパティのみを認識するようですが、Chrome は単語を分割する要求を受け入れます。

以下の例では、赤と青の部分が Chrome で同じようにレンダリングされます (xxxxx は複数の行に分割されています)。Firefox では、赤いボックスの xxxxx がオーバーフローします。

<div style="width:200px;background:red;">
  Hello <span style="word-break:break-all;">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span> World
</div>

<div style="width:200px;background:blue;word-break:break-all;">
  Hello <span>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span> World
</div>

上記の例: https://jsfiddle.net/7scx4hfq/

どのブラウザが正しく動作していますか? Firefox のバグですか、それとも Chrome のバグですか?

さらに重要なことに、すべてのブラウザーで目的の効果を得るにはどうすればよいでしょうか?

ブロック レベルでの設定word-break:break-allはオプションではないことに注意してください。

4

1 に答える 1

5

word-wrap: break-word;Firefox 用のエクストラを追加してみてください。

span {
  word-break: break-all; /* for others */
  word-wrap: break-word;  /* for Firefox */
}

すべてのテキストをできるだけ同じ行に維持したい場合はwhite-space: nowrap;、コンテナに設定しwhite-space: normal;、span. 繰り返しますが、これらの設定は Firefox 専用です。

div {
  background: yellow;
  width: 200px;
  white-space: nowrap;
}
span {
  background: aqua;
  word-break: break-all;
  word-wrap: break-word;
  white-space: normal;
}
<div>
  Hello <span>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span> World
</div>

jsフィドル

于 2016-07-01T15:59:55.633 に答える