Question

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

给出：

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

Answer 1

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

Answer 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>

Answer 3

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

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

HTML中的ASCII艺术

3 个答案: