Balises pré réactives en CSS

J'ai eu quelques problèmes de réactivité dans quelques articles, sur mon blog. Il s'est avéré que c'était des extraits de code

J'ai eu quelques problèmes de réactivité dans quelques articles, sur mon blog.

Il s'avère que ces messages sur lesquels j'ai eu des problèmes, ils avaient tous un extrait de code qui dépassait la largeur de page normale sans espace.

Par exemple

cd /some/super/long/super/long/folder

ou toute autre commande très longue.

Les extraits de code sur mon blog sont tous automatiquement ajoutés à l'intérieur d'uncodeétiquette, et à l'intérieur dans unpreétiqueter.

Par défaut le CSSwhite-spacepropriété sur leprela balise est définie surnormal, et pour résoudre ce problème, nous le définissons surpre-wrap:

pre {
  white-space: pre-wrap;
}

Lorsque certains mots sont trop longs, ils peuvent encore casser la mise en page. Pour résoudre ce problème, ajoutez également:

pre {
  word-break: break-all;
}

Téléchargez mon gratuitManuel CSS


Plus de didacticiels CSS: