48

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

给出：

#############################################>## ### # ## ###### # # ##### # # # # # # # # # # # # ##### # # # # # # ###### ######
4

2 回答 2

101

使用<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>
于 2009-11-09T17:38:53.900 回答
15

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

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

价值观

  • normal空格序列被折叠。源中的换行符作为其他空格处理。根据需要换行以填充行框。
  • pre保留空白序列，仅在源中的换行符处换行。
  • nowrap像正常一样折叠空白，但抑制文本中的换行符（文本换行）。
  • pre-wrap保留空白序列。行仅在源中的换行符处以及在填充行框时才断开。
  • pre-line空格序列被折叠。在源中的换行符处换行并根据需要填充行框。

在 ASCII 艺术的情况下，您还想强制使用固定宽度的font-family。

.ascii-art {
    font-family: monospace;
    white-space: pre;
}
<div class="ascii-art">
###### #    #   ##   #    # #####  #      ######
#       #  #   #  #  ##  ## #    # #      #      
#####    ##   #    # # ## # #    # #      ##### 
#        ##   ###### #    # #####  #      #      
#       #  #  #    # #    # #      #      #      
###### #    # #    # #    # #      ###### ######
</div>

于 2017-06-19T07:38:05.650 回答