How to add preformatted text in HTML?

HTML Web Development Front End Technology

In HTML <pre> tag is used for preformatted text. The text in between <pre> open and closed </pre> tags displayed exactly as written in HTML document. The usage of preformatted text is shown below -

<pre> ---- </pre>

The <pre> element displayed the text with preserved space and line breaks and also represents in a fixed-width font.

Example

Following example, which tries to add preformatted text in HTML −

<!DOCTYPE html>
<html>
<body>
   <h2> Different variations on Displaying Paragraph</h2>
   <pre>The <b>pre</b> element displayed the text with preserved space and line breaks and also represents in a fixed-width font.</pre>
</body>
</html>

Apply CSS settings to <pre> tag in HTML

Text present in between <pre> element is displayed in a fixed-width font; it can be changed by using CSS.

Example

Following is another example, where we add preformatted text in HTML −

<html>
<head>
   <title>Applying CSS to pre tag in HTML</title>
   <style>
      pre {
         font-family: Lucida Handwriting;
         color: blue;
         margin: 30px;
      }
   </style>
</head>
<body>
   <pre>
        Tutorials Point is a leading Ed Tech company striving to provide the best learning material on technical and non-technical subjects.
     </pre>
</body>
</html>

Example

Consider another example, of the <pre> tag in HTML, creating pre-formatted text with a fixed width using CSS -

<!DOCTYPE html>
<html>
<body>
   <h2>Usage of standard pre tag</h2>
   <pre>The standard pre tag uses as much space as it needs.</pre>
   <h2>Usage of Fixed width pre</h2>
   <div style="width:150px;overflow:auto">
      <pre>A pre tag with a fixed width. It uses as much space as specified.</pre>
   </div>
</body>
</html>

Example

<!DOCTYPE html>
<html>
<head>
   <style>
      pre {
         display: block;
         font-family: monospace;
         color: blue;
         white-space: pre;
         margin: 1em 0;
      }

      h2 {
         color: red;
      }
   </style>
</head>
<body>
   <h2>Usage of standard pre tag</h2>
   <pre>The standard pre tag uses as much space as it needs.</pre>
   <h3>Usage of Fixed width pre</h3>
   <div style="width:150px;overflow:auto">
      <pre>A pre tag with a fixed width. It uses as much space as specified.</pre>
   </div>
</body>
</html>

Bhanu Priya

Updated on: 10-Oct-2023

495 Views

Kickstart Your Career

Get certified by completing the course

Get Started