PR ブログ

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

2021年1月13日

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

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

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

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

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

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

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

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

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

カスタムCSSで折り返す

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

pre{
white-space: pre-wrap;
}

これで完了です。

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

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

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

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

外観➡︎テーマエディタ➡︎style.css
style.cssの折り返しコード

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

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

pre{
white-space: pre-wrap;
}

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

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

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

まとめ

  1. 1記事だけの設定なら『CSSコード』にコードを入力
  2. 全ての記事に反映させるなら『テーマエディター』にコードを入力

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

※無料ニュースレターを発信中:僕は持病を抱えつつも、13歳でブログで月収5万円を達成しました。その状況で得た「健康×ビジネス」の知識をニュースレターで共有していきます。無料登録はこちら。いつでも解約できます。

-ブログ