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 は、デフォルトで空白を折りたたむように設計されています。つまり、すべての一連の空白文字 (スペース、タブ、改行など) は、レンダリング時に単一のスペースに置き換えられます。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 に答える