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

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

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

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

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

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

  pre {
    white-space: pre-wrap;
  }

上記が解決コードです。

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

以上で完了です。

まとめ

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

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

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

Ads

関連記事

プログラミング

【簡単】アメブロ記事一覧をサイトに埋め込む方法

更新日:2020.06.12
511
WordPress プログラミング

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

2021.11.01
90
WordPress プログラミング

【簡単】contact form 7に郵便番号から住所自動入力機能を入れる方法

2022.02.07
396
HTMLCSS

【CSS】aタグ内にaタグを入れる方法【簡単】

更新日:2019.11.28
116