DIV 中国語テキストを折り返すようにして、display_html/css_WEB-ITnose

1.

<style>     div     {         white-space:normal;         word-break:break-all;         word-wrap:break-word;          }    </style> <div style=" width:100px; border:1px solid red">    I am a doibiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii    </div>

CSS を追加する前の効果: ------->効果あり:

2. これら 3 つの文の重要なポイントは次のとおりです。 and word-wrap

a:word-break 属性は自動行折り返しの処理方法を指定します。

ヒント: word-break 属性を使用すると、ブラウザで任意の位置で改行させることができます。

値 説明

normal	ブラウザのデフォルトの改行ルールを使用します。
break-all	単語内での改行を許可します。
keep-all	行の折り返しは半角スペースまたはハイフンでのみ可能です。

b:word-wrap 属性を使用すると、長い単語や URL アドレスを次の行に折り返すことができます。

値 説明

normal	許可されたハイフネーションポイントでのみ折り返します (ブラウザーはデフォルトの処理を維持します)。
break-word	長い単語または URL アドレス内の改行。

例を見てみましょう:

<style>     div     {           word-wrap:break-word;          }    </style><div style=" width:100px; border:1px solid red">    I am a doibiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii    </div>

結果:

dobiiiiiiiiiiiiiiiiiiiii 全体を改行して表示します。

<style>     div     {         word-break:break-all;                  }    </style><div style=" width:100px; border:1px solid red">    I am a doibiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii    </div>

結果:

改行表示のために dobiiiiiiiiiiiiiiiiiiiii を切り詰めます。

この 2 つの違いははっきりしているはずです。