pre内のテキストが改行されなくて困った！！折り返して表示する方法はこれ！！

自分のサイトが同表示されているのかふと思って、スマホでこのサイトを見て愕然とした。

<pre></pre>で囲ったテキストが長ーく横に伸びていて最後が見えなくなっている。

「これじゃ公開している意味ないよね」ということで<pre>内のテキストを自動で折り返してくれる方法をググった結果分かったことはというと。

CSSに以下のコードを追記すればいいといいうこと。

pre {white-space: -moz-pre-wrap; /* Mozilla */
    white-space: -pre-wrap;     /* Opera 4-6 */
    white-space: -o-pre-wrap;   /* Opera 7 */
    white-space: pre-wrap;      /* CSS3 */
    word-wrap: break-word;      /* IE 5.5+ */
}

「追記すればいいって簡単に言ってくれるけど、CSSのどこなんだ！！！」

と騒ぎたくなる気持ちを抑えてさらにググる。

すると使っているワードプレスのCSS編集に付け加えればいいということが判明（やったのは上のコードをコピペしただけ）。

さっそく、やってみると…

できました。

今まで一直線の線だったテキストが、自動で折れ曲がってくれているではないですか。

ありがたや、ありがたや。

というわけで、ちょっとした忘備録でした。

悩んでいたら参考にしてね。

スポンサーリンク