HTML中的ASCII艺术

Question

HTML中的ASCII艺术

我该怎么做才能使它像在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>

Run Code Online (Sandbox Code Playgroud)

得到:

#### ####### ####### ############################### ### ### ###### ####### ############################## ######

Answer 1

Joh*_*ala 72

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

Run Code Online (Sandbox Code Playgroud)

这似乎不适用于包含转义字符（即换行符“\”）的艺术。查看在这里找到的小猫：https://user.xmission.com/~emailbox/ascii_cats.htm - 有什么方法可以补偿吗？ (2认同)

Answer 2

Álv*_*lez 11

HTML旨在默认情况下折叠空白区域.换句话说,所有系列的空格字符(空格,制表符,换行符......)在渲染时都被一个空格所取代.您可以使用空白 CSS属性控制此行为:

该white-spaceCSS属性用来描述元素中空白的处理方式.

值

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

pre 保留空白的序列,仅在源中的换行符处断行.

nowrap 像正常一样折叠空格,但抑制文本中的换行符(文本换行).

pre-wrap保留了空白的序列.仅在源中的换行符处断开行,并根据需要填充行框.

pre-line空白的序列被折叠.在源中的换行符处断开行,并根据需要填充行框.

在ASCII艺术的情况下,您还希望强制使用固定宽度的字体系列.

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

尽管我对我的答案创建的所有答复感到满意，但是Alvaro的答案可能甚至更正确，因为如今这些方法是像定义他们一样定义一个类。 (2认同)
@JohnFiala仍然可以说，`<pre>`比`<div>`更具有语义。假设两个答案都提供了完整的图片；-) (2认同)

归档时间：	16 年，3 月前
查看次数：	39245 次
最近记录：	8 年前