html preタグを使用した際に枠外にはみ出さないようにする方法

今更ですが、こんな記事を書いて見ました。

表題にあるとおりHTMLコードを記述していて preタグを使用した際にpreタグを使用した部分だけ指定したwidthからはみ出て困ったことがありませんか？

特にＰＣでは問題なく表示されていてもモバイル端末で見たときにこんな現状がなっている人がいるんではないでしょうか？最近ではスマートフォンで閲覧する人が増えてきているのでモバイルに対するきちんとした対応は必須といえます。

今回はそんな場合の対策方法について記載します。

対策は簡単なもので下記のコードをcssで設定してあげるだけです。

今回はyoheim.netさんで紹介されているコードをそのまま引用させていただきました。

pre {
    white-space: pre-wrap;         /* CSS3 */
    white-space: -moz-pre-wrap;    /* Firefox */
    white-space: -webkit-pre-wrap; /* Chrome, Safari */
    white-space: -o-pre-wrap;      /* Opera 7 */
    word-wrap: break-word;         /* IE 5.5+ */
}