You have a blog. You write stuff. This is all good.

But it’s a technical blog. And so you write articles that include code or URLs or auth tokens or hex coded hashes or other horrors like AbstractImplementationOfBorrowCheckerFactoryPatternMatcher which results in words of unusual size. And this being important technical content, it’s styled as whitespace preserving per the fashion of our times.

This is problematic on narrower screens because those great big long words completely blow out your page width, with the resulting effect that the main content is a tiny sliver running down the side of the screen. You’ve gone to the trouble of picking a responsive layout because you want to be mobile friendly, but your selected styles respond to such content rather poorly.

There is an easy fix. Or two.

The CSS white-space property has a value called pre-wrap which in many cases is probably better than plain pre. Long code lines will wrap, so it doesn’t really look like code anymore, but hey, I’m reading this on a phone, not compiling it.

The CSS overflow-wrap property (previously word-wrap) has a value called break-word which will split up not just lines, but long words too.

There are other possible values as well, to suit your preference, but I’d be willing to bet most people (or their readers) would be happier with values other than the ones they are using (probably the defaults). Sacrificing a small amount of technical fidelity can greatly improve the readability of the prose, and with no negative effect on desktop viewers.