スマホでoverflow:auto;が効かない

※この記事は、2016年7月に他のブログ(WordPress)で書いた記事をQiitaに移行したものです。

スマホ（iOSのSafari）で、当ブログを見ていたら・・・
preタグで囲ったソースコードが、改行されまくっている！！
見づらい！！(´；ω；｀)
この問題を、ググッて解決できたので、載せます。

当ブログでのソースコード表示

まず、当ブログにソースコードを載せる際は、ソースコードをpreタグで囲っています。
preタグで囲うことで、改行やインデントを、整形せずにそのままの形で表示してくるんですね。
しかし、以下の問題がありました。

• スクロールする必要がなくても、縦横にスクロールバーが表示されて、あまり格好良くない・・・。
• 背景が白色で、ソースコードっぽくない。

CSSをいじってみる

PCではいい感じになったのですが、スマホ（iOSのSafari）で見ると、
横スクロールせずに全て改行されることに気づきました。

結論

調べて、いくつか試した結果、preタグに

word-wrap: normal;

を指定することで解決しました。

今回、preタグに指定したものは、以下になります。

overflow: auto !important;
background-color: #f7f7f7;
word-wrap: normal;

これで

• 必要なときだけ横スクロールバーが表示される
• 背景色をグレーにして、ソースコードっぽく
• スマホで見てもソースコードが改行されない

の３つを実現できました。

見づらいかもしれませんが、画像のような形になりました。

今回は以上です。