Responsive pre tags in CSS
New Course Coming Soon:
Get Really Good at Git
I've had some problems with responsiveness in a few posts, on my blog. Turned out it was code snippets
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;
}
→ Get my CSS Handbook
→ Read my CSS Tutorial on
The Valley of Code
Here is how can I help you:
- COURSES where I teach everything I know
- CODING BOOTCAMP cohort course - next edition in 2025
- BOOKS 16 coding ebooks you can download for free on JS Python C PHP and lots more
- Follow me on X