word-wrapの違い：break-wordとword-break：break-word

Question

非常に長い単語の場合、テキストが折り返していないため、代わりに無限に続くため、CSSをどこかで修正する必要がありました。

ほとんどの場合と同様に、私はCSSファイルにword-wrap: break-word;を試してみましたが、うまくいきませんでした。

私の驚いたことに、Google Chromeデベロッパーツールの提案では、word-break: break-word;を試してみましたが、問題は解決しました。私はこれにショックを受けたので、私はこれらの2つの違いを知りたがっていましたが、私は何も見ていませんでした。

また、私はword-break: break-word;がどのように動作していると文書化されているとは思わないかW3には言及していません。私はSafariとChromeでそれをテストしましたが、両方で完全に動作しますが、word-break: break-word;を使用することを躊躇しています。

Answer 1

更新

あなたは破る言葉を計画し、同様にハイフネーションしたい場合は、以下を試してみてください。

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

これは、Chromeでさえ働いていた...の...サンセリフハイフンソート。とにかく詳細な説明はarticleです。

---

word-break:break-word word-break:break-word 死の震えるごちそうのようなこの極秘技術は、マスター開発者だけが知っています。

実際には-webkit-という属性はword-wrap: break-wordのように機能しますが、ダイナミックな長さにも使用されます。 CaniUseから

Kenneth.io - Word Wrapping Hypernation Using CSS

CSS-Tricks - word-break

：

クロム、Safariや他のWebKit /点滅ブラウザもword-wrap: break-wordように扱われる非公式break-word値をサポートします。