pre要素内のコードをボックス枠内で折り返すCSS

2019年03月28日 (木)

Bloggerでブログ開設してからモバイル版の表示確認をしておらず
メインで使用しているWebブラウザの「Firefox」で、[Ctrl] + [Shift] + [M] のキーを押して、モバイル表示させてみました。

するとコードを表しさせているブロックが横幅を超えているのに折り返さず、横にズラズラっと表示されているではないですか。


表示されていない訳ではないので、何とか見ることはできるのですが、見栄えもよくなく、あまりよろしくないと感じました。

かなり時間が掛かるなら、放置でもいいかと思ったのですが、比較的、簡単に解決できたので、残しておくことにします。


ブログの記事内に対して適応させているので、.post-body クラスの子要素を対象にしています。

元のCSS

.post-body pre > code {
  display: block;
  padding: 10px 5px;
  background: #eee;
  border: 1px #ccc solid;
  color: #000;
  font-size: 0.8rem;
  font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  line-height: 1.2rem;
}

変更後のCSS

pre > code要素のみでスタイルシートを入れているので、code要素だけに適用すれば良いのでしょうが、 pre要素のみを使うことにも考慮して、pre要素に折り返しを追加しました。 これで十分だと思います。

.post-body pre {
  overflow: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.post-body pre > code {
  display: block;
  padding: 10px 5px;
  background: #eee;
  border: 1px #ccc solid;
  color: #000;
  font-size: 0.8rem;
  font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  line-height: 1.2rem;
}

念の為、Google Chromw のWebブラウザでも確認 意図した通りに表示されていて、安心しました。