【簡単】preタグ内テキストが折り返しされない問題をCSSで解決する方法
preタグを使っていて、中のテキストが折り返しされずはみでてしまう。
レスポンシブになるようpreタグ内のテキストも一定のデバイス幅まできたら可変し折り返すようにしたい。
このような悩みを解決します。
本記事ではCSSを使って、preタグ内テキストを折り返しさせるプロパティを紹介します。
preタグを折り返しさせるCSSプロパティ
pre {
white-space: pre-wrap;
}
上記が解決コードです。
white-spaceプロパティにpre-wrapを指定する事でpreタグ内のテキストを折り返してくれます。
以上で完了です。
まとめ
preタグは整形済みテキスト扱いなので、デフォルトだと改行されません。
pタグなどを使えば折り返しされますが、タグをpreタグから変更できない状況の場合、本記事を参考に修正してみてください。
以上で解説を終わります。
目次
