【CSS】整形済みテキストで改行されない｜pre要素で折り返しをする方法

整形済みテキストで改行されない場合の対処法を解説します。

整形済みテキストで改行されない

整形済みテキストが改行されずにはみ出ることがありますよね。

僕も折り返しがされなくて困っていましたが、以下の方法で解決しました。

• カスタムCSSを使用した方法
• style.cssに書き込む&書き換える

順番に解説します。
是非参考にしてください。

カスタムCSSを使用した方法

この方法は、一つの記事の整形済みテキストを折り返しをさせたい方におすすめです。

折り返ししたい記事の下の方に『カスタムCSS』とあると思います。

この欄に以下のコードを追加しましょう。

pre{
white-space: pre-wrap;
}

これで完了です。

このコードを入力した記事のみに反映されるので注意してください。

style.cssに書き込む&書き換える

こちらの方法は、全ての記事で折り返しを反映させることができます。

style.cssを書き込む場所は自由ですが、今回は次の方法を行いましょう。

外観➡︎テーマエディタ➡︎style.css

子テーマを使用している場合は、『編集するテーマを選択』から親テーマを選択します。

ここに入力するコードは先ほどと同じです。

pre{
white-space: pre-wrap;
}

入力する場所は好きなところでいいですが、よくわからない方は一番下に入力してください。

親テーマを書き換えるのは少しリスクがあるので注意しましょう。

コードを入力するだけでは不具合が起こることはないので、他のところを書き換えなければ問題ありません。

まとめ

というわけで、今回はここまでです。
最後まで読んでいただきありがとうございました。