How to Make Pre Tags Responsive in CSS

When I was building this site, I had a hard time styling the pre tags. That problem lead long code snippets (which are wrapped by pre tags) to overflow the width of the page, and cause the page layout to break. So I decided to share the solution I found and that worked for me.

I found that happens because by default pre tags have the CSS white-space property set to normal, like this:

cssCopy
1pre {
2	white-space: normal;
3}

To fix the issue you simple change normal property to pre-wrap:

cssCopy
1pre {
2	white-space: pre-wrap;
3}

This will improve the appearance, but doesn’t solve the overflow issue completely, because pre-wrap only addresses whole lines of code (a collection of code terms on a line, separated by white space).

What happens if individual words in your code lines are so long that they go beyond the width of your page?

Then your layout still breaks, because pre-wrap doesn’t address individual words.

To fix this issue, we need to add another CSS properties to the pre tag, called word-break then assign a value of break-all and word-wrap property then assign a value of break-word. Like this:

cssCopy
1pre {
2	white-space: pre-wrap;
3	word-break: break-all;
4  word-wrap: break-word;
5}

Now your pre tags should be responsive. I hope this article helped you.