← flaviocopes.com

Responsive pre tags in CSS

Published Oct 27 2019

I’ve had some problems with responsiveness in a few posts, on my blog.

Turns out those posts I had problems on, they all had a snippet of code that went beyond the normal page width without a space.

For example

cd /some/super/long/super/long/folder

or any other very long command.

Code snippets on my blog are all automatically added inside a code tag, and inside it into a pre tag.

By default the CSS white-space property on the pre tag is set to normal, and to fix this problem we set it to pre-wrap:

pre {
  white-space: pre-wrap;

When some words are too long they can still break the layout. To fix this, also add:

pre {
  word-break: break-all;

Wanna go from noobie to expert?

I wrote an entire book on this topic 👇

© 2023 Flavio Copes Flavio Copes using Notion to Site Notion to Site

Interested in solopreneurship?