Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > HTML/XHTML

  • Print
  • + Share This
This chapter is from the book

Using Preformatted Text

Usually, browsers collapse all extra returns and spaces and automatically break lines according to the size of the window. Preformatted text lets you maintain and display the original line breaks and spacing that you’ve inserted in the text. It is ideal for computer code examples red_circle-a.jpg, though you can also use it for text (hello, ASCII art!).

red_circle-a.jpg The pre element is ideal for text that contains important spaces and line breaks, like the bit of CSS code shown here. Note, too, the use of the code element to mark up pieces of code or code-related text outside of pre (see “Marking Up Code” for more details).

...a

<body>



<p>Add this to your style sheet if you want to display a 
dotted border underneath the <code>abbr</code> 
element whenever it has a <code>title</code> attribute.</p>



<pre>

     <code>

     abbr[title] {

        border-bottom: 1px dotted #000;

     }

     </code>

</pre>



</body>
</html>

To use preformatted text

  1. Type <pre>.
  2. Type or copy the text that you wish to display as is, with all the necessary spaces, returns, and line breaks. Unless it is code, do not mark up the text with any HTML, such as p elements.
  3. Type </pre>.
04_20.jpg

red_circle-b.jpg Notice that the indentation and line breaks are maintained in the pre content.

  • + Share This
  • 🔖 Save To Your Account