发表新帖
发表新帖

ASCII art in HTML

后端 未结
关注
3 600
我在风中等你
我在风中等你 2021-02-03 18:20

What could I do to make it print like it looks in the HTML document in the web browser?
相关标签:
3条回答
  • 你的背包
    2021-02-03 18:45

    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 讨论(0)
  • 广开言路
    2021-02-03 18:49 

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

    0 讨论(0)
  • 温柔的废话
    2021-02-03 19:01

    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 讨论(0)
 看不清?
提交回复
热议问题