Art ASCII en HTML

Que puis-je faire pour le faire imprimer comme il semble dans le document HTML dans le navigateur web?

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

Donne:

# # ## # # ##### # ###### # # # # # ## ## # # # # ##### ## # # # ## # # # # > ##### # ## ###### # # ##### # # # # # # # # # # # # ###### # # # # # # # ###### ######
25
demandé sur FredMaggiowski 2009-11-09 20:37:43

2 réponses

Utilisez la balise <pre>! Mettez-le avant et après votre exemple.

<!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>
58
répondu John Fiala 2016-04-05 08:39:27

HTML est conçu pour réduire les espaces blancs par défaut. Dans les mots d'ordre, toutes les séries d'espaces blancs caractères (espaces, onglets, flux de ligne...) sont remplacés par un seul espace sur le rendu. Vous pouvez contrôler ce comportement avec le blanc-espace propriété CSS:

La propriété CSS white-space est utilisée pour décrire comment les espaces à l'intérieur de l'élément sont gérés.

Les Valeurs de

  • normal les séquences d'espaces sont réduites. De retour à la ligne les caractères de la source sont traités comme d'autres espaces. Casse les lignes si nécessaire pour remplir les zones de ligne.
  • pre Les séquences d'espaces sont conservées, les lignes ne sont brisées qu'aux caractères de saut de ligne dans la source.
  • nowrap réduit les espaces comme pour la normale, mais supprime les sauts de ligne (enveloppement de texte) dans le texte.
  • pre-wrap Les séquences d'espaces sont conservées. Les lignes ne sont brisées qu'au niveau des caractères de saut de ligne dans la source et, si nécessaire, pour remplir les zones de ligne.
  • pre-line Les séquences d'espaces sont réduites. Les lignes sont brisées à la nouvelle ligne dans la source et, si nécessaire, pour remplir les zones de ligne.

Dans le cas de l'art ASCII, vous souhaitez également appliquer une famille de polices à Largeur fixe .

.ascii-art {
    font-family: monospace;
    white-space: pre;
}
<div class="ascii-art">
###### #    #   ##   #    # #####  #      ######
#       #  #   #  #  ##  ## #    # #      #      
#####    ##   #    # # ## # #    # #      ##### 
#        ##   ###### #    # #####  #      #      
#       #  #  #    # #    # #      #      #      
###### #    # #    # #    # #      ###### ######
</div>
7
répondu Álvaro González 2017-06-19 07:38:05