CSS-linebreak_html/css_WEB-ITnose

テキストのオーバーフローと改行の問題については、まず改行に関連する属性を確認してください: http://www.w3school.com.cn

1. word-break

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

値 説明

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

定義: word-wrap 属性により、長い単語や URL アドレスをラップできます。次の行へ。

値 説明

normal

許可されたハイフネーションポイントでのみ行を折り返します (ブラウザはデフォルトの処理を維持します)。

break-word

長い単語または URL アドレス内の改行。

非 CJK テキスト (英語など) の改行ルール、word-wrap: Break-word、長い単語を次の行に折り返す (単語を分割する) ことができます。 。 CJK(中国語/日本語/韓国語)(中国語/日本語/韓国語)3、ホワイトスペース

定義: ホワイトスペース属性は、要素内のホワイトスペースの処理方法を設定します。

値の説明

normal

デフォルト。空白はブラウザによって無視されます。

pre

空白はブラウザによって保持されます。 HTML の

 タグのように動作します。  
 
 
nowrap テキストは折り返されず、
 タグが見つかるまで同じ行に続きます。 pre-wrap空白シーケンスを保持しますが、通常通りにラップします。 pre-line空白シーケンスを結合しますが、改行は保持します。 inherit 空白属性の値を親要素から継承することを指定します。 4. アプリケーションシナリオ1.デフォルトの状況2.word-break: Break-all3.word-wrap : Break -word
 
 
 
 
 
 
 
 
 
 
 
 
 
 
上記の特性をよくご存知であれば、それは素晴らしいことですが、そうでなくても問題ありません。効果を見てみましょう: デモンストレーション効果、runjs
 
スクリーンショットは次のとおりです: 
 
 
 
 
 
 
 
 
 
 
4.white-space: nowrap
 
 
5. 結論