Comment puis-je envelopper du texte dans une pré-étiquette ?

Question

Les balisespre sont super utiles pour les blocs de code en HTML et pour déboguer la sortie lors de l'écriture de scripts, mais comment faire pour que le texte s'enroule au lieu d'imprimer une longue ligne ?

Answer 1

La réponse, de cette page dans 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+ */
}

Answer 2

Cela fonctionne très bien pour envelopper le texte et maintenir un espace blanc dans le pre -tag :

pre {
    white-space: pre-wrap;
}

Answer 3

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

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

Answer 4

Plus succinctement, cela force le contenu à envelopper l'intérieur d'une balise pre sans casser les mots.

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

Answer 5

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

word-break: keep-all;