• 質問プレゼンテーション

<div class="main">Nameofuser-definedcallbackfunctiontobecalledwheneverastreamtriggersanotification. </div>

<style type="text/css">.main{    width: 100px;    border: 2px solid red;}</style>

デフォルトでは、連続する単語は行の場合

• word-break 属性を理解してください

最近のほとんどのブラウザのデフォルトの改行ルールは半角スペースとハイフンなので、normalとkeep-allの効果は同じです。

• ワードブレイク: ブレークオール

<style type="text/css">.main{    width: 100px;    border: 2px solid red;        word-break: break-all;}</style>

ワードブレイク: Break-all は、デフォルトの改行ルールを破ります。では、ハイフンでのスペースと改行を維持したい場合はどうすればよいでしょうか?

• ワードラップ属性を理解しましょう

デモを見てください。単語 < の中にいくつかのスペースを挿入しました。 🎜>

まず比較のためにデフォルトのものを見てみましょう。効果をより明確にするために、長い単語にさらにいくつかのスペースを挿入しました

<div class="main">    Name of user-definedcallbackfunction to be called wheneverastreamtriggersanotification. </div>

<style type="text/css">.main{    width: 100px;    border: 2px solid red;}</style>

デフォルトでは、図 ラベル 2 と 4 は、間にスペースやハイフンがない長い連続した単語であるため、改行 (オーバーフロー) はありません。

ワードラップ: ブレイクワードのデモをご覧ください

<style type="text/css">.main{    width: 100px;    border: 2px solid red;    word-wrap: break-word;}</style>

画像から、スペースとハイフンの行折り返し状態が保持されています。前の図の 2 行目と 4 行目に長い単語をラップするだけです。

word-break: ブレークオール、ブラウザのデフォルトの行折り返しルールを破る
word-wrap: ブレークワード、予約済みブラウザのデフォルトの行折り返しルールでは、長い連続単語が 1 行に収まらない場合、この長い単語のみが新しい行に分割されます