How to Render an HTML String Preserving Spaces and Line Breaks

Solution with the HTML <pre> tag

The HTML <pre> which is used to put a preformatted text into an HTML document preserves spaces and line breaks of the text.

Watch a course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Example of preserving spaces and line breaks of a text with the HTML <pre> tag:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <pre>Lorem Ipsum is simply           dummy text
      of the printing and typesetting industry.
                            Lorem Ipsum has been the industry's 
      standard dummy text ever since the 1500s....
    </pre>
  </body>
</html>

Solution with the CSS white-space property

The CSS white-space property determines how the white space is handled inside an element.

In the example below, we add our text in a <div> element and then set the white-space property to "pre-wrap" for it.

Example of preserving spaces and line breaks with the CSS white-space property on a <div>:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        white-space: pre-wrap;
      }
    </style>
  </head>
  <body>
    <div>
      Lorem Ipsum is simply dummy text of 
           the printing and typesetting industry. 
        Lorem Ipsum has been the industry's      standard dummy text ever 
        since the                           1500s, when an unknown
         printer took                      
          a galley of type and           scrambled it to make a type specimen book.
    </div>
  </body>
</html>

We can use the same method by using a <span> element instead of a <div>.

Example of preserving spaces and line breaks with the CSS white-space property on a <div>:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      span {
        white-space: pre-wrap;
      }
    </style>
  </head>
  <body>
    <span>
      Lorem Ipsum is simply dummy text of 
                 the printing and typesetting industry.
        Lorem Ipsum has been the industry's     standard dummy text ever 
         since the                             1500s, when an unknown 
           printer took
             a galley of type and                        scrambled it
                to make a type specimen book.
    </span>
  </body>
</html>

If you don’t want the first lines of each paragraph indented, you can try the following example where we use the "pre-line" value of the white-space property.

Example of removing indentation with the "pre-line" value of the white-space property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        white-space: pre-line;
      }
    </style>
  </head>
  <body>
    <div>
      Lorem Ipsum is simply dummy text of 
                    the printing and typesetting industry. 
        Lorem Ipsum has been the industry's       standard dummy text ever 
      since the                       1500s, when an unknown
       printer took     
         a galley of type and 
               scrambled it to make a type specimen book.
    </div>
  </body>
</html>