Question Comment ajouter du texte dans un pré-tag?


pre Les balises sont super utiles pour les blocs de code en HTML et pour le débogage de la sortie lors de l'écriture de scripts, mais comment faire du texte au lieu d'imprimer une longue ligne?


553
2017-10-29 19:03


origine


Réponses:


La réponse, de cette page en CSS:

pre {
    white-space: pre-wrap;       /* Since CSS 2.1 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

788
2017-10-29 19:04



Cela fonctionne très bien pour envelopper le texte et maintenir l'espace blanc dans le pre-marque:

pre{
    white-space: pre-wrap;
}

95
2018-05-23 13:45



J'ai trouvé que sauter le pré-tag et utiliser l'espace blanc: pré-wrap sur un div est une meilleure solution.

 <div style="white-space: pre-wrap;">content</div>

45
2017-12-16 19:04



Je suggère d'oublier le pré et juste le mettre dans une zone de texte.

Votre indentation restera et votre code ne sera pas enveloppé de mots au milieu d'un chemin ou quelque chose.

Plus facile de sélectionner la plage de texte dans une zone de texte si vous souhaitez copier dans le presse-papier.

Ce qui suit est un extrait de php, donc si vous n'êtes pas en PHP, la façon dont vous empaquetez les caractères spéciaux html variera.

<textarea style="font-family:monospace;" onfocus="copyClipboard(this);"><?=htmlspecialchars($codeBlock);?></textarea>

Pour plus d'informations sur la façon de copier du texte dans le presse-papiers dans js, voir: Comment copier dans le presse-papiers en JavaScript? .

Toutefois...

J'ai juste inspecté les blocs de code stackoverflow et ils s'enroulent dans une balise <code> enveloppée dans la balise <pre> avec css ...

code {
  background-color: #EEEEEE;
  font-family: Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;
}
pre {
  background-color: #EEEEEE;
  font-family: Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;
  margin-bottom: 10px;
  max-height: 600px;
  overflow: auto;
  padding: 5px;
  width: auto;
}

Aussi le contenu des blocs de code stackoverflow est mis en évidence par la syntaxe en utilisant (je pense) http://code.google.com/p/google-code-prettify/ .

C'est une belle configuration mais je vais juste avec textareas pour l'instant.


15
2018-05-15 12:26



C'est ce dont j'avais besoin. Il a gardé les mots de rupture, mais a permis une largeur dynamique dans la zone pré.

word-break: keep-all;

13
2018-01-20 18:35



Tu peux soit:

pre { white-space: normal; }

pour maintenir la police monospace, mais ajouter un mot-enveloppe, ou:

pre { overflow: auto; }

ce qui permettra une taille fixe avec un défilement horizontal pour les longues lignes.


9
2017-10-29 19:06



J'ai combiné @richelectron et @ user1433454 réponses.
Cela fonctionne très bien et préserve le formatage du texte.

<pre  style="white-space: pre-wrap; word-break: keep-all;">

</pre>

9
2017-08-20 15:35



Essaye ça

  pre {
        white-space: pre-wrap;       /* CSS 3 */
        white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
        white-space: -pre-wrap;      /* Opera 4-6 */
        white-space: -o-pre-wrap;    /* Opera 7 */
        word-wrap: break-word;       /* Internet Explorer 5.5+ */
        padding:0px;
        margin:0px
    }

7
2017-10-12 12:55



Essayez d'utiliser

<pre style="white-space:normal;">. 

Ou mieux jeter CSS.


4
2017-10-29 19:10