今日、当ブログのコーディング例が書かれている記事の一部で、widthが勝手に広がってしまっていることに気づきました。 解決方法を探していたところ、white-spaceというCSSのプロパティを見つけたのですが、このプロパティにはこれ以外にも良い使い道があったので併せて紹介したいと思います。

記事幅が勝手に広がるのを防ぐのに使える

記事にコードを乗せるとpreタグとして展開されるようになってます。

preタグでは書かれたとおりに表示するようになっているので、一行をあまりに長く書いてしまうと、記事の横幅が勝手に広がってしまうことがあります。 一見バグのように見えますが、preタグというのはこういう仕様なんだそうです。

で、これを防ぐのにwhite-spaceというプロパティが有効でした。 値はpre-wrapです。

pre[class*='language-'] > code {
    white-space: pre-wrap;
}

GatsbyJS＆Prism.jsという僕の環境ではこのように記述したところ、横幅が勝手に広がってしまうのを見事解消することができました。

MarkdownをGithub風に改行させるのにも使えます

先日【GatsbyJS】gatsby-remark-componentの使用をやめましたという記事を書きました。 この記事のなかで、gatsby-remark-componentというプラグインを使うとGithub風に改行させることができちゃうとも書いたんですが、実はもっと簡単に実装できることが分かりました。 これも前述のpre同様、CSSでwhite-spaceを設定するだけなんです。 JSで作り込む必要なんて全然なかったんですね。

値もpreの時と全く一緒で、今回はそれをpタグに設定するだけです。

p {
    white-space: pre-wrap;
}

たったのこれだけで解決してしまいます。

CSSすごいです。