W3docs
en
Log in

How to Render an HTML String Preserving Spaces and Line Breaks

In this tutorial, you can learn how to render an HTML text preserving spaces and line breaks. You need to use the HTML <pre> tag or the CSS white-space property.

Tags

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.

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>
Try it Yourself »

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>
Try it Yourself »

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>
Try it Yourself »

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>
Try it Yourself »