HTML&CSS
「pre」であふれたテキストの対処法2つ

タグで囲んだ範囲のテキストを「整形済みテキスト」として表示できる「pre」タグ。

「pre」は「preserve(保存する)」の略で、詩やソースコード、アスキーアートなど、改行や空白を維持したまま表示させたい時にお馴染みですね。

テキストエディターでの改行は、通常は「半角スペース」としてブラウザ表示されるのですが、「pre」タグを使うとそのまま表示する事ができます。

ただ、デフォルトではテキストの折り返しもないため、長文になるとテキストが画面から溢れ出てしまいます。

ここでは、「pre」タグでテキストが溢れた時の対処法を2つまとめています。

「pre」あふれ対処法①スクロールさせる

「pre」で溢れた部分の対処法の1つは、スクロール表示です。

画面におさまる部分だけ表示して、溢れた部分はスクロールで表示できるようにします。

ソースコードなど、文字を折り返さない方が見やすい時や、改行空白をそのまま表示したい時に効果的です。

溢れた部分をスクロールで表示させたい場合は、CSSで「pre」タグに「overflow: auto;」を指定すればOKです。

これで画面から溢れた部分は、スクロールで表示することが出来ます。

pre{
  overflow: auto;
}

「pre」あふれ対処法②折返し

「pre」で溢れた部分の対処法のもう1つは、折返し表示です。

テキストが画面いっぱいで自動的に折り返すので、スクロールせず、画面内に全てを表示したい時に有効です。

「pre」タグで囲んだテキストを折返しさせる場合は、CSSで「pre」タグに「white-space: pre-wrap;」を指定すればOKです。

こうすると「pre」タグで囲んだテキストでも、画面いっぱいで折り返す事ができます。

pre{ 
　white-space: pre-wrap;
}