How to Make HTML Code Blocks Responsive

Alex Hooley headshot

Alex Hooley

21st February 2020 · 1 min read

Quick Answer

To make your HTML code tags more responsive and stop them overflowing off the side of the page, wrap them in <pre></pre> tags and apply white-space: pre-wrap; to them like this:

<pre style="white-space: pre-wrap;">
    .my-example-code {
      color: deepskyblue;
      margin: 5px 10px;
White space pre wrap browser compatibility
white-space: pre-wrap; browser compatibility

The white-space:pre-wrap; CSS property is supported by most browsers giving you 93% global compatibility.

If you want to spice your HTML Code blocks up a bit try adding the highlight.js library. It automatically detects which language you are using and come with loads of built in styles!


White-space property – Mozilla MDN Web Docs
Browser compatibility –
Code Block Styles – highlight.js

Recent Posts

Ready to Start?

Get in touch…

If you want to find out if your website could be ranking better & bringing in more qualified leads and customers then get in touch!

Contact Me