Written by Kasumi

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

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

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

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

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

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

  pre {
    white-space: pre-wrap;
  }

上記が解決コードです。

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

以上で完了です。

まとめ

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

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

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

目次

関連記事

WordPress プログラミング

【wordpress投稿】アイキャッチではなく最初の画像をサムネイルにする方法

更新日:2021.10.26
2395
WordPress プログラミング

【wordpress.orgにログインできず、プラグインの新規追加・外部へ接続する際の通信がうまくいかない】原因・解決方法を紹介

更新日:2022.10.19
5515
WordPress プログラミング

【簡単】デフォルト検索にACFカスタムフィールドの値を含める方法【wordpress】

更新日:2022.03.19
3343
WordPress プログラミング

wordpressのfeed取得先がEntity: line 2: parser で見れない時の対処方法

2021.10.27
1158