AI Workshop: learn to build apps with AI →
CSS Tips: Responsive pre tags in CSS

Join the AI Workshop and learn to build real-world apps with AI. A hands-on, practical program to level up your skills.


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

It turned out that those posts all had a code snippet that extended 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 automatically wrapped in a code tag, which is placed inside 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;
}

Lessons in this unit:

0: Introduction
1: How to center an element with CSS
2: CSS Border inside the element
3: What are good CSS Breakpoint values for Responsive Design?
4: How to debug CSS by bisecting
5: How to disable text selection using CSS
6: How to put an item at the bottom of its container using CSS
7: CSS, how to select elements that do not have a class
8: How to stick an element on the bottom of the page with flexbox
9: How to apply padding to multiple lines in CSS
10: Making a table responsive using CSS
11: CSS url()
12: How to make an element smaller or bigger with CSS
13: Customizing visited links
14: Fix extra space after inline element
15: How to create a sidebar that’s sticky but also scrolls
16: How to embed YouTube videos using the correct aspect ratio
17: ▶︎ Responsive pre tags in CSS
18: Responsive YouTube Video Embeds
19: How to remove all CSS from a page at once
20: How I added Dark Mode to my website
21: How to add a simple dark mode