CSS : forcer le retour à la ligne du code pre en CSS3

Je me suis rendu compte en rédigeant mes articles sur l’installation du serveur dédié que le code bash, lorsqu’il était un peu long, n’allait pas à la ligne automatiquement.

Il était écrit d’une seule ligne dans son conteneur, forçant une barre de navigation horizontale bien disgracieuse… Heureusement, cela est maintenant une chose du passé.

Le code est affiché sur le site avec la balise pre, qui permet l’affichage d’un texte pré-formaté.

Or la particularité de cette balise est qu’elle désactive le retour à la ligne. Voici une astuce en CSS pour contre-carrer cet effet indésirable.

/* Forcer le retour à la ligne de la balise PRE - skyminds.net */		
pre {
   white-space: pre-wrap;             /* CSS3 */
}

A titre indicatif, pour les anciens navigateurs, on pouvait utiliser des balises spécifiques à chaque navigateur :

/* Forcer le retour à la ligne de la balise PRE, balises spécifiques - skyminds.net */		
pre {
   white-space: -moz-pre-wrap;     /* Mozilla */
   white-space: -pre-wrap;           /* Opera 4-6 */
   white-space: -o-pre-wrap;        /* Opera 7 */
   word-wrap: break-word;           /* IE5.5+ */
}

Le code est compatible CSS3, et donc fonctionne sous tous les navigateurs.

Vous voulez un site WordPress ou WooCommerce qui soit à la fois rapide et performant? Vous êtes au bon endroit.

Découvrez comment je peux booster votre site »

Articles conseillés :

5 pensées sur “CSS : forcer le retour à la ligne du code pre en CSS3”

  1. Tiens, j’aurais juré avoir posté un commentaire hier… Bon, le voila :

    Récemment j’ai du administrer un serveur dédié et j’ai bloqué le SSH… Enfin j’ai autorisé le mauvais port sous iptables. Du coup j’ai pensé à toi :D

    Reply
    • Ah les joies d’iptables… maintenant je laisse toujours une fenêtre de terminal ouverte pour tester si je n’ai pas fait d’âneries. Il me semble que l’on peut effectuer un “net boot” en cas de problèmes (cela éviterait de tout refaire si j’ai bien compris ?).

      Reply
      • Dedibox propose un rescue mode, un service gratuit qui boot une distribution live ubuntu minimal dans un coin du serveur, et on peut s’y connecter via le port par défaut (22) et des identifiants générés spécialement pour le coup (donc niveau sécurité, c’est pas dérangeant). Après, vu qu’on est sur un autre OS, il faut passer en root et monter toutes les partitions pour pouvoir éditer les fichiers qu’on souhaite – qui se retrouvent souvent avec des noms barbares, genre /mnt/sda2/etc/rc2.d/K14firewall. C’est un peu barbare mais pas compliqué et surtout ça évite de tout reinstaller.

        Plus d’infos ici pour dédibox, et apparemment OVH propose la même chose ici.

Opinions