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 mais é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.

<code class="language-css">/* 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+ */
}

Je n'utilise que la version CSS3, qui fonctionne sous tous mes navigateurs (Firefox, Chrome et Opera).

Et au passage, nous noterons que - bien évidemment - Internet Explorer n'utilise pas du tout la même syntaxe que le reste du monde...

Pour développer votre projet WordPress ou Woocommerce, faites appel à mon expertise pour réaliser un site rapide, performant et fonctionnel.

Contactez-moi

Si vous avez trouvé une faute d’orthographe, informez-nous en sélectionnant le texte en question et en appuyant sur Ctrl + Entrée s’il vous plaît.

Articles en rapport:

CSS : forcer le retour à la ligne du code pre en CSS3, sous Mozilla, Opera et IE

par Matt Lecture: 1 min
5

Pin It on Pinterest

Share This

Spelling error report

The following text will be sent to our editors: