いわゆる「Code」でスクロールバーを出さない方法

今回は短い記事です♪

ブログのカスタマイズ系とかの記事を書いていると、HTMLであるとかCSSであるとかを記事に載せる機会も多いと思います。

で、見たまま記法だとなにやら載せられない（？）らしいので、Markdownなりで載せるわけですが・・・。

<div style="color:#ff0000;font-size:72px; font-weight:bold; text-shadow:15px 15px 5px #555;">あいうえお</div>

長いコードだと上の様な状態ではみ出した分がスクロールして見ないといけない状態になってしまいます。
(Chromeで検証】）

見栄え悪いですよね～。

でも普通にスクロールバー無しで表示されてるブログもあるので、なんらかの方法があるはず！

検索してみました。

いわゆる【Code】で折り返す方法

ズバリな記事がありました！！

参考文献：pre要素で折り返しをするためのCSS: 小粋空間
（小粋空間さんって、４～５年前にMovabletypeとかSerenebachとかでブログやってた頃かなりお世話になった覚えが。懐かしい）

はい！書いてある通りデザインCSSに以下を追記いたしましょう。

pre {
white-space: pre-wrap;
word-wrap: break-word;
overflow: auto;
}

はい！以下のとおり無事に折り返してくれるようになりました♪

<div style="color:#ff0000;font-size:72px; font-weight:bold; text-shadow:15px 15px 5px #555;">あいうえお</div>

まとめ

この記事書くの結構苦労しました。 折り返しと折り返しじゃない表示を記事の中で混在させないといけないので、インラインで特殊文字変換しなきゃいけないわで、そっちの検索のほうが時間かかったかもしれないｗ