HTML中的ASCII艺术

Question

HTML中的ASCII艺术

53

我应该怎样才能使它在网页浏览器中打印出与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>

输出结果：

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

- Mladek

https://dev59.com/5Wkx5IYBdhLWcg3wA_xS - Ciro Santilli OurBigBook.com

2个回答

16

HTML默认会折叠空白字符。换句话说，所有的连续空格、制表符、换行等都会在渲染时被替换为单个空格。你可以使用white-spaceCSS属性来控制这种行为：

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

取值

normal 连续的空白序列会被合并。源代码中的换行符将被视为其他空格字符。必要时断行以填满行框。

pre 连续的空白序列将被保留，仅在源代码中的换行符处进行换行。

nowrap 像 normal 一样合并空白，但会禁止文本内部发生换行（文本换行）。

pre-wrap 连续的空白序列将被保留。只在源代码中的换行符处和必要时进行换行以填充行框。

pre-line 连续的空白序列会被合并。在源代码中的换行符处断行以及必要时填充行框。

在ASCII艺术中，您还需要强制使用固定宽度的font-family。

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

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

- Álvaro González

2

虽然我很高兴我的答案得到了很多赞，但阿尔瓦罗的答案可能更正确，因为现在定义类的方式就像他们所说的那样。 - John Fiala

2

@JohnFiala 仍然可以争论 <pre> 比 <div> 更语义化。我们可以说两种答案都提供了完整的图片;-) - Álvaro González

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- John Fiala · Accepted Answer

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