HTML 中的 ASCII 艺术

发布于 2024-08-10 08:39:06 字数 969 浏览 2 评论 0原文

我该怎么做才能使其打印得像 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>

给出：

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

原文

What could I do to make it print like it looks in the HTML document in the web browser?

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

Gives:

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

清醇 2024-08-17 08:39:06

使用

 标签！将其放在示例之前和之后。

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

Use the <pre> tag! Put it before and after your EXAMPLE.

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

回复收藏 0 原文

内心激荡 2024-08-17 08:39:06

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

white-space CSS 属性用于描述如何处理元素内的空白。
价值观
正常 空白序列被折叠。源中的换行符被视为其他空格。根据需要断行以填充行框。
pre 保留空白序列，仅在源代码中的换行符处换行。
nowrap 与正常情况一样折叠空白，但抑制文本内的换行符（文本换行）。
pre-wrap 保留空白序列。仅在源代码中的换行符处断行，并根据需要填充行框。
pre-line 空白序列被折叠。源代码中的换行符处会断行，并根据需要填充行框。

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

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

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

HTML is designed to collapse white space by default. In order words, all series of white spaces characters (spaces, tabs, line feeds...) are replaced by a single space on rendering. You can control this behaviour with the white-space CSS property:

The white-space CSS property is used to to describe how whitespace inside the element is handled.
Values
normal Sequences of whitespace are collapsed. Newline characters in the source are handled as other whitespace. Breaks lines as necessary to fill line boxes.
pre Sequences of whitespace are preserved, lines are only broken at newline characters in the source.
nowrap Collapses whitespace as for normal, but suppresses line breaks (text wrapping) within text.
pre-wrap Sequences of whitespace are preserved. Lines are only broken at newline characters in the source and as necessary to fill line boxes.
pre-line Sequences of whitespace are collapsed. Lines are broken at newlines in the source and as necessary to fill line boxes.

In the case ASCII art you also want to enforce a fixed-width font-family.

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

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

回复收藏 0 原文

~没有更多了~