Искусство ASCII в HTML

Что я могу сделать, чтобы он печатался, как выглядит в документе 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>

дает:

# # ## # ###### # # # # # ## ## # # # # ##### ## # # # ## # # # ####################### ### # ## ###### # # # ##### # # # # # # # # # # # # ###### # # # # # # # ###### ######

Ответы

Ответ 1

Используйте тег <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>

Ответ 2

HTML предназначен для свертывания пробела по умолчанию. Для слов все серии символов пробелов (пробелы, вкладки, линейные каналы...) заменяются одним пространством при рендеринге. Вы можете контролировать это поведение с помощью white-space свойство CSS:

Свойство CSS white-space используется для описания того, как обрабатывается пробел внутри элемента.

Значение

  • normal Последовательности пробелов сбрасываются. Символы новой строки в источнике обрабатываются как другие пробелы. Разбивает строки по мере необходимости, чтобы заполнить строки.
  • pre Последовательности пробелов сохраняются, строки только разбиваются на символы новой строки в источнике.
  • nowrap Сбрасывает пробелы как для нормального, но подавляет разрывы строк (перенос текста) в тексте.
  • pre-wrap Сохраняются последовательности пробелов. Строки разбиты только на символы новой строки в источнике и по мере необходимости заполняют строки.
  • pre-line Последовательности пробелов сбрасываются. Строки разбиваются на строки новой строки в источнике и, если необходимо, заполняют линейные поля.

В случае искусства ASCII вы также должны применять фиксированную ширину font-family.

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