ワードブレイクとオーバーフローラップ（以前のワードラップ）は、長(zhǎng)い単語(yǔ)や壊れないコンテンツを扱うときに異なって行います。 1.ワードブレイクは、要素をブロックする?yún)g語(yǔ)が壊れ、壊れる長(zhǎng)い言葉を破る、壊れないようにするために、中國(guó)語(yǔ)、日本、韓國(guó)語(yǔ)のテキストに適している方法を制御します。 2。オーバーフローをオーバーフローする必要がある場(chǎng)合は、長(zhǎng)い単語(yǔ)を破壊します。 3。使用法のシナリオでは、ワードブレイク：コードにbreak-allを使用し、オーバーフローラップ：ユーザーコメントに分割ワードを使用します。 4.ブラウザの互換性とさまざまなモバイル動(dòng)作の違いに注意してください。読みやすさを向上させるために、ホワイトスペースまたはハイフンを組み合わせることをお?jiǎng)幛幛筏蓼埂?

特に長(zhǎng)い単語(yǔ)や壊れないコンテンツでCSSのテキストレイアウトを扱う場(chǎng)合、 word-breakとword-wrap （現(xiàn)在は公式にはoverflow-wrapとして知られています）は、コンテナ內(nèi)でのテキストがどのように壊れるかを制御するのに役立つ2つのプロパティです。一見すると似ているように見えるかもしれませんが、それらは少し異なって動(dòng)作し、さまざまなシナリオで使用されています。

word-break何をしますか

word-breakプロパティは、コンテナの端に到達(dá)したときの単語(yǔ)がブロック要素內(nèi)で壊れる方法を制御します。

• normal - デフォルトの動(dòng)作を使用します（許可されたスペースでの破損）。
• break-all - 必要に応じて、オーバーフローを防ぐために必要に応じて壊すことができます - URLやコードスニペットなどの文字列に役立ちます。
• keep-all - 単語(yǔ)の境界が明確でない中國(guó)語(yǔ)、日本、または韓國(guó)のテキストによく使用される言葉の中で壊れることを防ぎます。

たとえば、 verylongwordwithoutspacesような長(zhǎng)い文字列がある場(chǎng)合、 word-break: break-all単語(yǔ)の中央でも複數(shù)の行に包むように強(qiáng)制されます。

これは、非常に長(zhǎng)い文字列を含む可能性のあるユーザー生成コンテンツを表示する場(chǎng)合に特に便利です。それがなければ、それらの文字列はレイアウトを破る可能性があります。

word-wrap （またはoverflow-wrap ）の仕組み

その名前ですが、 word-wrap一般的に単語(yǔ)を包むことではありません。それは、長(zhǎng)い壊れない言葉によって引き起こされるオーバーフローを処理することです。

2つの主な値があります。

• normal - 通常のワードブレークポイントでのみブレイクします。
• break-word - 単語(yǔ)內(nèi)で壊れてオーバーフローを防ぐことができます（ word-break: break-allですが、もう少しコンテキストが認(rèn)識(shí)されます）。

多くの場(chǎng)合、これはコメントやチャットバブルなどの要素で使用されることがよくあります。ユーザーは、APIキーや、レイアウトの問(wèn)題を引き起こす長(zhǎng)い電子メールアドレスのようなものを入力または貼り付ける可能性があります。

注： word-wrap現(xiàn)在、公式にoverflow-wrapと呼ばれていますが、両方の名前はまだ機(jī)能しています。

いつ使用するの？

それらの間で選択することは、あなたが扱っているコンテンツの種類と、あなたのレイアウトのニーズがどれほど厳格であるかによって異なります。

• word-break: break-all 。
• overflow-wrap: break-word - 絶対に必要でない限り、単語(yǔ)全體をそのままにしようとします。

また、 white-spaceと組み合わせるか、 hyphensを使用して、場(chǎng)合によってはよりよく読むことを検討してください。

これが簡(jiǎn)単な參照です：

• コードブロックまたはログの場(chǎng)合→ word-break: break-all
• ユーザーのコメントやチャットの場(chǎng)合→ overflow-wrap: break-word
• より良いハイフネーション（サポートされている場(chǎng)合）→ hyphens: auto

注意すべきことがいくつかあります

これらのプロパティは、すべてのブラウザ、特に古いブラウザで常に同じように動(dòng)作するとは限りません。

• EdgeまたはSafariの一部のバージョンでは、 word-break Chromeとまったく同じように機(jī)能しない場(chǎng)合があります。
• ハイフネーション（ hyphens ）は最新のブラウザではうまく機(jī)能しますが、デフォルトではすべての言語(yǔ)には適用されません。
• モバイルブラウザは、畫面のサイズとズームの動(dòng)作により、単語(yǔ)のラップを異なる方法で処理する場(chǎng)合があります。

レスポンシブサイトまたはアプリを構(gòu)築する場(chǎng)合は、さまざまなデバイスとビューポートサイズでテキスト破壊スタイルをテストして、予期せずにオーバーフローするものがないことを確認(rèn)してください。

基本的にそれだけです。

以上が「ワードブレイク」と「ワードラップ」プロパティを説明してくださいの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。