HTML 中的 ASCII 艺术答案

【问题标题】：ASCII art in HTML [duplicate]HTML 中的 ASCII 艺术
【发布时间】：2010-12-14 17:24:19
【问题描述】：

我可以怎样做才能让它像在网络浏览器中的 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>

给予：

#############################################>## ### # ## ###### # # ##### # # # # # # # # # # # # ##### # # # # # # ###### ######

【问题讨论】：

stackoverflow.com/questions/9492249/…

标签： html ascii-art

【解决方案1】：

.ascii-art {
    font-family: monospace;
    white-space: pre;
}

<div class="ascii-art">
###### #    #   ##   #    # #####  #      ######
#       #  #   #  #  ##  ## #    # #      #      
#####    ##   #    # # ## # #    # #      ##### 
#        ##   ###### #    # #####  #      #      
#       #  #  #    # #    # #      #      #      
###### #    # #    # #    # #      ###### ######
</div>

【讨论】：

【解决方案2】：

默认情况下，HTML 设计为折叠空白。换句话说，所有一系列的空白字符（空格、制表符、换行符...）在渲染时都被单个空格替换。您可以使用white-space CSS 属性控制此行为：

white-space CSS 属性用于描述如何处理元素内的空白。

价值观

normal 空格序列被折叠。源中的换行符作为其他空格处理。根据需要换行以填充行框。

pre 保留空白序列，仅在源中的换行符处换行。

nowrap 正常折叠空白，但禁止文本中的换行符（文本换行）。

pre-wrap 保留空白序列。仅在源代码中的换行符处以及填充行框时才换行。

pre-line 空格序列被折叠。在源中的换行符处换行并根据需要填充行框。

如果是 ASCII 艺术，您还想强制使用固定宽度的 font-family。

.ascii-art {
    font-family: monospace;
    white-space: pre;
}

<div class="ascii-art">
###### #    #   ##   #    # #####  #      ######
#       #  #   #  #  ##  ## #    # #      #      
#####    ##   #    # # ## # #    # #      ##### 
#        ##   ###### #    # #####  #      #      
#       #  #  #    # #    # #      #      #      
###### #    # #    # #    # #      ###### ######
</div>

【讨论】：

虽然我对我的答案所创造的所有代表感到高兴，但 Alvaro 的答案可能更正确，因为现在这样做的方法是定义一个像他们一样的类。
@JohnFiala 尽管如此，可以说<pre> 比<div> 更具语义。假设这两个答案都提供了全貌;-)

【解决方案3】：

使用<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>

【讨论】：

虽然从技术上讲你可能想要
```
# ... #
```
（没有换行符）或使用 cmets () 来消除你的空白可能不想要。
这似乎不适用于包含转义字符的艺术（即换行符'\'）。看看这里找到的小猫：user.xmission.com/~emailbox/ascii_cats.htm - 有什么方法可以补偿吗？
您需要使用 '\' 转义换行符。例如，对艺术中的单斜杠 ('\') 执行 '\\'。