Written by Kasumi

【簡単】preタグ内テキストが折り返しされない問題をCSSで解決する方法

preタグを使っていて、中のテキストが折り返しされずはみでてしまう。

レスポンシブになるようpreタグ内のテキストも一定のデバイス幅まできたら可変し折り返すようにしたい。

このような悩みを解決します。

本記事ではCSSを使って、preタグ内テキストを折り返しさせるプロパティを紹介します。

preタグを折り返しさせるCSSプロパティ

  pre {
    white-space: pre-wrap;
  }

上記が解決コードです。

white-spaceプロパティpre-wrapを指定する事でpreタグ内のテキストを折り返してくれます。

以上で完了です。

まとめ

preタグは整形済みテキスト扱いなので、デフォルトだと改行されません。

pタグなどを使えば折り返しされますが、タグをpreタグから変更できない状況の場合、本記事を参考に修正してみてください。

以上で解説を終わります。

目次

関連記事

HTMLCSS プログラミング

【簡単】CSSでフォントサイズ(font-size)を10px以下で表示する方法

2022.02.19
1238
HTMLCSS

【CSS】flexboxで最後の要素は右寄せ・最初の要素は左寄せにする方法

2022.07.14
231
プログラミング

htaccessを使ってhttpからhttpsへリダイレクトさせる方法

2022.04.15
104
WordPress プログラミング

【wordpress】子カテゴリページで親カテゴリの情報を取得する方法

2021.11.01
663