Comment faire défiler horizontalement les blocs <pre> de Twitter Bootstrap ?

Question

Selon les exemples https://getbootstrap.com/docs/4.3/content/code/#code-blocks , bootstrap ne prend en charge que les textes à défilement vertical et les textes enveloppés de mots. <pre> blocs hors de la boîte. Comment faire pour avoir à la place des blocs de code non enveloppés et pouvant défiler horizontalement ?

Answer 1

L'astuce réside dans le fait que bootstrap remplace à la fois les white-space et la norme CSS3 word-wrap pour les attributs <pre> élément. Pour obtenir un défilement horizontal, assurez-vous de la présence de cet élément dans votre CSS :

pre {
  overflow: auto;
  word-wrap: normal;
  white-space: pre;
}

Answer 2

Cela a fonctionné pour moi :

pre {
    overflow-x: auto;
}
pre code {
    overflow-wrap: normal;
    white-space: pre;
}

Answer 3

Je reviens toujours à cette réponse lorsque je commence de nouveaux projets et que je dois lire les commentaires pour me rappeler, oh oui, ne pas surcharger la classe bootstrap et ne pas oublier overflow-wrap, etc...

Vous avez donc le stock pre-scrollable , qui est un défilement vertical uniquement, vous pouvez également souhaiter :

Défilement horizontal uniquement

.pre-x-scrollable {
    overflow: auto;
    -ms-word-wrap: normal;
    word-wrap: normal;
    overflow-wrap: normal;
    white-space: pre;
}

Défilement vertical et horizontal

.pre-xy-scrollable {
    overflow: auto;
    -ms-word-wrap: normal;
    word-wrap: normal;
    overflow-wrap: normal;
    white-space: pre;
    max-height: 340px;
}

Answer 4

Les versions plus récentes de Bootstrap appliquent des styles à la fois à pre y code qui enveloppent les mots. En ajoutant ceci à ma feuille de style, j'ai résolu le problème :

pre code {
        white-space: pre;
        word-wrap: normal;
}