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 */
}Code language: CSS (css)

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+ */
}Code language: CSS (css)

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

Vous avez un projet WordPress ou WooCommerce en tête? Transformez votre vision en réalité avec mon expertise reconnue.

Parlons de votre projet dès aujourd'hui »

Articles conseillés :

Matt

Matt Biscay est développeur WordPress et WooCommerce certifié chez Codeable, ainsi que sysadmin qualifié et enseignant-chercheur. Passionné par le code performant et les solutions sécurisées, je m'efforce d'offrir une expérience utilisateur exceptionnelle sur chaque projet.

Vous avez aimé cet article ? Vous avez un projet en tête et vous pensez que je pourrais vous aider à le concrétiser ? N'hésitez pas à me contacter, je serais ravi de discuter avec vous de votre projet !

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