Comment encapsuler du texte dans une balise pré?

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 puis-je faire le retour à la ligne du texte au lieu d'imprimer une longue ligne?

La réponse, à partir 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+ */
}

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

pre {
    white-space: pre-wrap;
}

J'ai trouvé que sauter la balise pre et utiliser l'espace blanc: pré-envelopper sur une div est une meilleure solution.

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

Plus succinctement, cela force le contenu à s'enrouler à l'intérieur d'une balise «pré» sans casser les mots. À votre santé!

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

Voir l'exemple en direct ici .

Voilà ce dont j'avais besoin. Il empêchait les mots de se casser mais permettait une largeur dynamique dans la zone de pré.

word-break: keep-all;

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

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

Sélectionnez plus facilement la plage de texte dans une zone de texte si vous souhaitez la 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 emballerez 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 en js, voir: Comment copier dans le presse-papiers en JavaScript? .

Toutefois...

Je viens d'inspecter les blocs de code stackoverflow et ils enveloppent dans une balise <code> enveloppée 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 la syntaxe mise en évidence en utilisant (je pense) http://code.google.com/p/google-code-prettify/ .

C'est une bonne configuration mais je vais juste avec des zones de texte pour l'instant.

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>

Vous pouvez soit:

pre { white-space: normal; }

pour conserver la police monospace mais ajouter un retour à la ligne, ou:

pre { overflow: auto; }

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

Essayez d'utiliser

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

Ou mieux jeter CSS.

Utilisez white-space: pre-wrapet certains préfixes pour le saut de ligne automatique à l'intérieur de pres.

Ne l'utilisez pas, word-wrap: break-wordcar cela brise bien sûr un mot en deux, ce qui est probablement quelque chose que vous ne voulez pas.

Le meilleur moyen de navigation croisée a fonctionné pour moi pour obtenir des sauts de ligne et affiche 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>

Ce qui m'a aidé:

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

Merci

Le <pre>-Element signifie « pré-formaté texte » et est destiné à maintenir la mise en forme du texte (ou autre) entre ses balises. Par conséquent, il n'est en fait pas prévu d'avoir un retour automatique à la ligne ou des sauts de ligne dans le <pre>-Tag

Le texte d'un élément est affiché dans une police à largeur fixe (généralement Courier) et il préserve les espaces et les sauts de ligne .

source: w3schools.com , souligne le fait par moi-même.