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 like this Monokai style:

.my-example-code {
  color: deepskyblue;
  margin: 5px 10px;

.more-example-code caption {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  color: #6c757d;
  text-align: left;
  caption-side: bottom;


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

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!


Submit a Comment

Your email address will not be published. Required fields are marked *