html - オーバーフローラップとワードブレイクの違いは?

Question

overflow-wrap/word-wrapとの正確な違いはword-break何ですか? そして、非常に長いリンクを切断するためのより良い方法を誰か教えてもらえますか? ほとんどの人は word-break を と組み合わせて使用​​すべきだと言いますが、overflow-wrapあまり論理的ではないように見えます。クロスブラウザーのサポートを向上させるためoverflow-wrapに と組み合わせて使用​​するのが最善の方法だと思います。word-wrapどう思いますか？

Answer 1

ソースからの引用

• word-wrap: CSS の word-wrap プロパティは、改行できない文字列が長すぎてボックスに収まらない場合に、オーバーフローを防ぐために単語内で改行できるかどうかを指定するために使用されます。

• overflow-wrap :word-wrapプロパティはoverflow-wrap、CSS3 Text 仕様の現在のドラフトで名前が変更されました

• word-break: CSS の word-break プロパティは、単語内で改行する方法 (または改行するかどうか) を指定するために使用されます。

したがって、正しい組み合わせである word-wrap と組み合わせて word-break が必要です。

Answer 2

この時点で、word-break: break-wordは実際には のエイリアスであることを理解しておくと役立ちますoverflow-wrap: anywhere。

word-break: break-word公式に非推奨です。CSS Text Module Level 3 Working Draftを参照してください:

従来のコンテンツとの互換性のために、このword-breakプロパティは非推奨のbreak-wordキーワードもサポートしています。指定すると、overflow-wrap プロパティの実際の値に関係なく、word-break: normalおよび と同じ効果があります。overflow-wrap: anywhere

ここで注意すべきことは、これ word-break: break-wordは のエイリアスであり、 のエイリアスでoverflow-wrap: anywhereはないということですoverflow-wrap: break-word。

(word-break: normalは のデフォルト値なword-breakので、 に別の値を設定しない限り無視できますword-break。)

overflow-wrap: anywhereと のoverflow-wrap: break-word違いは？

この 2 つのドキュメントの唯一の違いは、overflow-wrap: anywhere「最小コンテンツの固有サイズを計算する」ときに「ワード ブレークによって導入されたソフト ラップの機会を考慮する」ことはありますが、そうでoverflow-wrap: break-wordはないことです。

幅を考慮している場合、幅がより正確になる場合があると思いますか?

Answer 3

正確な違いは次のとおりです：（Chrome v81でのテストに基づいて、仕様を参照して私の観察を確認しました）

空白

normal(デフォルト): 空白チェーンと改行を折りたたみます。必要に応じて改行を追加します
nowrap。空白チェーンと改行を折りたたみます。改行を追加しません
pre-line: 空白チェーンを折りたたみます。必要に応じて改行を追加
pre-wrapします。折りたたみはありません。必要に応じて改行を追加します。
break-spaces改行の追加をトリガーできるスペースを除いて、プリラップと同じ
preです。改行を追加しません

注: 選択したwhite-space値リストが「改行を追加しない」場合、次のプロパティの改行動作は適用できません (つまり、無視されます)。

単語区切り

normal(デフォルト): コンテナ内に収まる最後の単語の末尾で改行 [存在する場合]、そうでない場合
break-wordは改行しない : コンテナ内に収まる最後の単語の末尾で改行 [存在する場合]、そうでない場合はコンテナの最後で
break-all改行コンテナの終わり [近くに空白がある場合でも、単語を分割できます]

オーバーフロー ラップ(以前の名前: ワード ラップ)

normal(デフォルト): コンテナ内に収まる最後の単語の最後で改行 [存在する場合]、それ以外の場合
break-wordは改行しない : コンテナ内に収まる最後の単語の最後で改行 [存在する場合]、そうでない場合はコンテナの最後で改行 [存在しない場合] -flex container], そうでなければ行は途切れずに残される
anywhere: コンテナ内に収まる最後の単語の最後で改行 [存在する場合], そうでない場合はコンテナの最後で [ と同じword-break: break-word]

overflow-wrap: break-wordfor (コンテナーに対して行が長すぎる組み合わせと同様に)、切れ目のない行により、指定されたフレックス比率を超えてフレックスコンテナーが拡張される可能性があることに注意してください(長すぎるコンテンツを考慮して、他のフレックスコンテナーを強制的に縮小させます)。