インライン要素のFirefoxのワード区切り

Question

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

Firefoxは、ブロックとして表示される要素（例：<div>）の単語区切りプロパティを認識しますが、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はオプションではありません。

Answer 1

word-wrap: break-word;をFirefox用に追加できます。あなたは可能な限り同じ行のすべてのテキストを維持したい場合は

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

、あなたはコンテナにwhite-space: nowrap;を設定し、span上white-space: normal;にそれをリセットすることができます。繰り返しますが、これらの設定は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>

jsFiddle