Responsive pre tags in CSS

Pre tag wrap – Responsive pre tags in CSS | How to Make Pre Tags 100% Responsive in CSS

by

<pre>: The Preformatted Text element

Pre tag wrap: The “pre” of a <pre> tag actually signifies “preformatted text” – which doesn’t say anything regarding what that text is. A <code> tag, semantically, says the text within is code. The demo code of Pre tag using CSS is given below:

pre {
    font-size: .7rem;
    margin: 0;
}

Output:

  L          TE
    A       A
      C    V
       R A
       DOU
       LOU
      REUSE
      QUE TU
      PORTES
    ET QUI T'
    ORNE O CI
     VILISÉ
    OTE-  TU VEUX
     LA    BIEN
    SI      RESPI
            RER       - Apollinaire

Also, this tutorial covers the following stuff regarding Responsive pre tags in CSS:

Attributes of Pre Element

CSS preformatted: This preformatted element (Pre Tag) only involves the global attributes and they are as follows:

cols: Includes the preferred count of characters that a line should have. It was a non-standard synonym of width. To accomplish such an effect, use CSS width instead.
width: Holds the preferred count of characters that a line must-have. However, technically still implemented, this attribute has no visual effect; to accomplish such an effect, use CSS width instead.
wrap: Is a hint indicating how the overflow must happen. In modern browsers, this hint is neglected and no visual effect results in its presence; to achieve such an effect, use CSS white-space instead.

Example on Pre Tag using CSS

<p>Using CSS to change the font color is easy.</p>
<pre>
body {
  color: red;
}
</pre>

Result:

pre tag example result

Do Check:

How to Make Pre Tags 100% Responsive in CSS?

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;
}

Make “Pre” Text Wrap

By default, Text in <pre> tags doesn’t wrap. For instance, see the code snippet below! If this is making layout problems, one solution is to give the pre block an overflow property to cover the excess or make it scroll. Another solution is to have it wrap.

/* Browser specific (not valid) styles to make preformatted text wrap */		

pre {
 white-space: pre-wrap;       /* css-3 */
 white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
 white-space: -pre-wrap;      /* Opera 4-6 */
 white-space: -o-pre-wrap;    /* Opera 7 */
 word-wrap: break-word;       /* Internet Explorer 5.5+ */
}