web-dev-qa-db-fra.com

Comment insérer du texte dans une balise pré?

Les balises pre sont très utiles pour les blocs de code HTML et pour le débogage de la sortie lors de l'écriture de scripts, mais comment puis-je transformer le texte en word-wrap au lieu d'imprimer une longue ligne?

htmlcss
648
adambox

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+ */
}
922
adambox

Cela fonctionne très bien pour envelopper du texte et maintenir un espace dans la balise pre-:

pre{
    white-space: pre-wrap;
}
120
richelectron

J'ai constaté que le fait de sauter la balise pre et d'utiliser un espace: pré-envelopper sur une div est une meilleure solution.

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

C'est ce dont j'avais besoin. Cela empêchait les mots de se rompre mais permettait une largeur dynamique dans la zone de pré.

Word-break: keep-all;
20
user1433454

Plus succinctement, cela oblige le contenu à envelopper à l'intérieur d'une balise "pre" sans casser les mots. À votre santé!

pre {
  white-space: pre-wrap;
  Word-break: keep-all
}

Voir exemple en direct ici .

18
Erin Delacroix

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

Votre mise en retrait restera et votre code ne sera pas Word-wrapped au milieu d'un chemin ou quelque chose.

Il est également plus facile de sélectionner une plage de texte dans une zone de texte si vous souhaitez copier dans le Presse-papiers.

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

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

Pour savoir comment copier du texte dans le presse-papiers en format js, voir: Comment copier du texte dans le presse-papiers en JavaScript? .

Pourtant...

Je viens d'inspecter les blocs de code stackoverflow et ils enveloppent une balise <code> dans une 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;
}

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

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

16
ekerner

J'ai combiné les réponses @richelectron et @ user1433454.
Cela fonctionne très bien et préserve la mise en forme du texte.

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

</pre>
14
vovahost

Vous pouvez soit:

pre { white-space: normal; }

pour conserver la police monospace tout en ajoutant Word-wrap, ou:

pre { overflow: auto; }

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

13
Bobby Jack

Essayez d'utiliser

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

Ou mieux jeter CSS.

7
Eduardo Campañó

La meilleure méthode de navigation croisée a fonctionné pour moi pour obtenir des sauts de ligne et afficher le code ou le texte exact: (chrome, Internet Explorer, Firefox)

CSS:

xmp{ white-space:pre-wrap; Word-wrap:break-Word; }

HTML:

<xmp> your text or code </xmp>
4
feacco

Ce qui suit m'a aidé:

pre {
    white-space: normal;
    Word-wrap: break-Word;
}

Merci

2
prashant2402