Mots-clé : css

HTML : tags <pre> / <code> : comment forcer retour à la ligne

Voici une astuce : vous avec une page qui s’affiche parfaitement, avec plein de choses, à part un petit détail plutôt gênant : vous avez des lignes de code qui « débordent » et lorsque vous voulez imprimer, comme, justement, ça déborde, vous n’avez pas le code en entier.

Il vous suffit de mettre ce code en dernier dans le css (afin qu’il « écrase » toutes les configurations précedentes des retour-chariot) :


pre, code {
 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+ */
}

Et voilà, vous pourrez imprimer votre document tranquillement, tout le code sera affiché.
Cet article fait suite à une question que j’ai posée sur stackoverflow.com. Cette dernière avait déjà été posée, et la réponse était valide : le lien est ici. Et la solution, carrément à la source, est ici.