For this blog, I use the Hemingway theme by Anders Norén. I really like it, but while writing a post with some long terminal outputs earlier today, I noticed that the <pre> blocks, in which code and terminal outputs are wrapped (by Org2Blog) get line-wrapped. This makes it difficult for the reader to interpret the blocks, especially when the block contents is e.g. an ASCII art-like table.

So I wanted to see if I could somehow fix this with some CSS. And it turns out you can! In the WordPress admin screen, go to “Appearance”, then “Additional CSS”. There I added the following and clicked on “Publish”: 

.post-content pre {
  word-wrap: normal;
  overflow-x: auto;
  white-space: pre;
}

This pice of code overwrites part of the theme’s CSS and makes sure the <pre> blocks get a horizontal scroll bar.

Related Images: