html - Firefox の word-break は短い単語をランダムなポイントで分割します

Question

break-word極端に長い単語が溢れないようにコンテナに入れています。Chrome と Safari はこれに非常にうまく対処していますが、Firefox と IE は単語を無作為に (たとえ短い単語であっても) 最もばかげたポイントで分割するのが好きなようです。以下のスクリーンショットを参照してください。

単語の分割を防ぐために使用しているコードは次のとおりです。

.break-word {
-ms-word-break: break-all;
word-break: break-all;
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}

これは、コンテナとテキストに使用している CSS です。

.wrap {
position: relative;
text-align: center;
margin: 40px auto 20px;
padding: 50px;
border: 4px double #f7f7f7;
display: block;
}
.quote-text {
font-size: 40px;
line-height: 50px;
font-weight: 400;
}

HTML

   <div class="wrap break-word">
     <div class="row-fluid quotation-marks">&ldquo;&rdquo;</div>
     <span class="quote-text">
       Having a partner definitely allows you to take more risks.
     </span>
     <span class="author">Arianna Huffington</span>
   </div>

なぜこうなった？すべてのブラウザで単語を正常に分割する方法についての手がかりはありますか? Firefoxは間違いなく優先事項です。

前もって感謝します！

Answer 1

CSS パラメータを 2 倍にしています。これを試して..

.break-word {
-ms-word-break: break-all;
-ms-word-wrap: break-all;
-webkit-word-break: break-word;
-webkit-word-wrap: break-word;
word-break: break-word;
word-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}

Answer 2

ブレークワードコードを次のように変更して、一時的な修正を行いました。

.break-word {
word-break: break-word;
word-wrap: break-word;
}

言葉はもはや奇妙に壊れていません。クロスブラウザのサポートに関して、これがどれほど安全かはわかりません（Chrome、Firefox、Safariの最新バージョンでのみテストしたため）

en-USどうやらハイフンは明示的に宣言された場合にのみサポートされます。誰かがより有効な答え/説明を持っているならば、私はあなたの答えを喜んで受け入れます。

Answer 3

を削除しword-break: break-allます。その意味は、あなたが説明している正確な問題を引き起こすということです。ブラウザは、単語を自由に細かく分割するように指示されています。

使用word-wrap: break-all可能な幅に行を収める方法が他にない場合にのみ単語を分割するようにブラウザに指示するため、 を使用する方が賢明です (またはあまり無意味ではありません)。しかし、これもまた、英語や他のほとんどの言語の規則に違反しています。任意のポイントで単語を区切ることは正しくありません。だから、それも奪ってください。

ハイフネーションの方がはるかに理にかなっていますが、ブラウザのサポートが制限されており、明らかな理由から、テキストの言語を宣言する必要があります (ハイフネーションの規則は言語に強く依存しているため)。Hyphenator.jsなどの JavaScript ベースのハイフネーションを使用して、CSS ハイフネーションをサポートしていないブラウザーに対処できます。

Answer 4

word-break:keep-all;

私のために問題を解決しました