logo

CSSでテキストを折り返すにはどうすればよいですか?

CSS ワードラップ プロパティは、長い単語を区切って次の行に折り返すために使用されます。このプロパティは、分割できない文字列が長すぎて格納ボックスに収まらない場合にオーバーフローを防ぐために使用されます。

このプロパティは、単語が長すぎてコンテナーに収まらない場合のオーバーフローを回避するために、単語の区切りを定義します。コンテンツがコンテナの境界を越えた場合の単語の区切りを指定します。

ファイルを変更する Linux

構文

 word-wrap: normal | break-word | initial l inherit ; 

価値観

普通: これは、許可されたブレークポイントでのみ単語を分割するために使用されるデフォルト値です。

ブレークワード: 壊れない言葉を壊すために使用されます。

イニシャル: プロパティをデフォルト値に設定するために使用されます。

継承: 親要素からプロパティを継承します。

 .test { width: 200px; background-color: lightblue; border: 2px solid black; padding: 10px; font-size: 20px; } .test1 { width: 11em; background-color: lightblue; border: 2px solid black; padding: 10px; word-wrap: break-word; font-size: 20px; } <p> In this paragraph, there is a very long word: iamsooooooooooooooooooooooooooooooolongggggggggggggggg. The long word will break and wrap to the next line. </p> 
今すぐテストしてください

出力

CSSでテキストを折り返す方法