Html display formatted text

Question

I’ve to display a bunch of text on an html page. The text looks something like this:

+-001 This is a Line            00:12:04
  002 ----------------------------------
- 003 Everthing looks good so far ------ 

The text is “pre-formatted” and contains a lot of whit spaces and dashes and every line has the same length (all chars have the same width).

Is there a way to display the text in html without losing the format?

Answer 1

Wrap your text inside the <pre> tag.

JSFiddle

<pre>
+-001 This is a Line            00:12:04
  002 ----------------------------------
- 003 Everthing looks good so far ------ 
</pre>

Answer 2

The HTML way is to use the pre element, which has been designed for such usage, but beware that

• To be on the safe side in formatting, put the <pre> tag right at the start of the first line and the </pre> tag right at the end of the last line. Otherwise some browsers may behave as if there were an empty line at the start or at the end of the element.
• You still need to escape occurrences of the characters < and & in the content (there are some cases where this is not needed, but it is simplest to ignore that.

Example (where I have added a line containing the expression 1 + 1 < 3):

<pre>+-001 This is a Line            00:12:04
  002 ----------------------------------
- 003 Everthing looks good so far ------
- 004 Simple as 1 + 1 &lt; 3         ------</pre>

You can avoid escaping < and & by using xmp instead of pre, but xmp has been declared deprecated, obsolete, and whatever (but it works nicely in practice).

<xmp>+-001 This is a Line            00:12:04
  002 ----------------------------------
- 003 Everthing looks good so far ------
- 004 Simple as 1 + 1 < 3         ------</xmp>