改行の入ったテキストをきちんと改行させる方法
2022-05-13
よちよち歩き

概要

次のように曜日毎に改行を入れて編集したテキストがあったとします。

改行を入れたテキストデータ

これをWebページで表示したら次のように改行が無視された状態になってしまいました。

改行が無視された

これを次のように表示するようにするための方法のメモです。

改行が聴いたうえで、はみ出さないように折り返している

方法

改行を効くようにする

もともと改行が無視されてしまったテキスト全体を<a>タグで囲っていたのですが、これを<pre>タグに変更しました。ただし、このままだと、上図の5/20のデータが折り返さずに切れてしまいました。

長過ぎるテキストを折り返すようにする

こちらは以下のCSSを設定しました。

white-space: pre-wrap;