箱のプログラミング日記。

渋谷の自社開発企業でRails書いてます。

テキストを折り返し表示【CSS】

f:id:y_hakoiri:20191102121915j:plain

HTMLを書いていて、例えばpタグの中の文章を改行させたい場合

 

おはようございます。

今日の天気は雨です

明日は晴れです

 

<p>おはようございます。</p>

<p>今日の天気は雨です</p>

<p>明日は晴れです</p>

 

pタグはブロック要素なので、pタグで囲まれた要素は一行を占領する。

つまり、行ごとにpタグで囲んであげれば自動的に改行されて表示することができる。

 

ただこのやり方は少しナンセンスな気がして調べた

 

該当要素にwhite-spaceをCSSで指定すると、

改行やスペースに関するスタイルを当てることができる。

 

creive.me

 

今回の自分のケースでは、

改行を反映させた上で、親要素からはみ出てしまう場合は自動的に折り返す

というスタイルを実現したかったので、

white-space: pre-wrap;

pre-wrapを当てました。