HTML 中的 ASCII 艺术
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1702559/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ASCII art in HTML
提问by Mladek
What could I do to make it print like it looks in the HTML document in the web browser?
我该怎么做才能让它像在 Web 浏览器中的 HTML 文档中一样打印？
<!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>
###### # # ## # # ##### # ######
# # # # # ## ## # # # #
##### ## # # # ## # # # # #####
# ## ###### # # ##### # #
# # # # # # # # # #
###### # # # # # # # ###### ######
</body>
</html>
Gives:
给出：
# # ## # # ##### # ###### # # # # # ## ## # # # # ##### ## # # # ## # # # # > ##### # ## ###### # # ##### # # # # # # # # # # # # ###### # # # # # # # ###### ######
##############################################>## ################################################ ######
回答by John Fiala
Use the <pre>tag! Put it before and after your EXAMPLE.
使用<pre>标签！把它放在你的例子之前和之后。
<!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>
回答by álvaro González
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-spaceCSS property:
HTML 旨在默认折叠空白。换句话说，所有系列的空白字符（空格、制表符、换行符...）在渲染时都被单个空格替换。您可以使用white-spaceCSS 属性控制此行为：
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.
该
white-spaceCSS属性用来描述元素中空白的处理方式。价值观
normal空白序列被折叠。源中的换行符作为其他空格处理。根据需要换行以填充行框。pre保留空白序列，仅在源中的换行符处断行。nowrap像正常一样折叠空白，但禁止文本中的换行符（文本换行）。pre-wrap保留空白序列。仅在源中的换行符处和填充行框时才换行。pre-line空白序列被折叠。行在源中的换行符处断开，并根据需要填充行框。
In the case ASCII art you also want to enforce a fixed-width font-family.
在 ASCII 艺术的情况下，您还想强制使用固定宽度的font-family。
.ascii-art {
font-family: monospace;
white-space: pre;
}<div class="ascii-art">
###### # # ## # # ##### # ######
# # # # # ## ## # # # #
##### ## # # # ## # # # # #####
# ## ###### # # ##### # #
# # # # # # # # # #
###### # # # # # # # ###### ######
</div>