ASCII art in HTML
Use the <pre> tag! Put it before and after your EXAMPLE.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example</title>
</head>
<body>
<pre>
###### # # ## # # ##### # ######
# # # # # ## ## # # # #
##### ## # # # ## # # # # #####
# ## ###### # # ##### # #
# # # # # # # # # #
###### # # # # # # # ###### ######
</pre>
</body>
</html>
HTML is designed to collapse white space by default. In order words, all series of white spaces characters (spaces, tabs, line feeds...) are replaced by a single space on rendering. You can control this behaviour with the white-space CSS property:
The
white-spaceCSS property is used to to describe how whitespace inside the element is handled.Values
normalSequences of whitespace are collapsed. Newline characters in the source are handled as other whitespace. Breaks lines as necessary to fill line boxes.preSequences of whitespace are preserved, lines are only broken at newline characters in the source.nowrapCollapses whitespace as for normal, but suppresses line breaks (text wrapping) within text.pre-wrapSequences of whitespace are preserved. Lines are only broken at newline characters in the source and as necessary to fill line boxes.pre-lineSequences of whitespace are collapsed. Lines are broken at newlines in the source and as necessary to fill line boxes.
In the case ASCII art you also want to enforce a fixed-width font-family.
.ascii-art {
font-family: monospace;
white-space: pre;
}<div class="ascii-art">
###### # # ## # # ##### # ######
# # # # # ## ## # # # #
##### ## # # # ## # # # # #####
# ## ###### # # ##### # #
# # # # # # # # # #
###### # # # # # # # ###### ######
</div>