Как сделать Twitter Bootstrap <pre class="prettyprint-override"> blocks scroll horizontally?

Согласно примерам https://getbootstrap.com/docs/4.3/content/code/#code-blocks, bootstrap из коробки поддерживает только вертикально прокручиваемые и завернутые в слова блоки <pre>. Как мне сделать так, чтобы вместо этого у меня были горизонтально прокручиваемые, развернутые блоки кода?

Ответ 1

Фокус в том, что bootstrap переопределяет атрибуты white-space и CSS3 word-wrap для элемента <pre>. Чтобы добиться горизонтальной прокрутки, убедитесь в этом в CSS:

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

Ответ 2

Это сработало для меня:

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

Ответ 3

Я продолжаю возвращаться к этому ответу, когда начинаю новые проекты и должен читать комментарии, чтобы помнить, о да, не переопределяйте класс начальной загрузки и не забывайте переполнения и т.д.

Итак, у вас есть запас pre-scrollable, который является только вертикальной прокруткой, вы также можете:

Прокрутка только по горизонтали

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

Вертикальная и горизонтальная прокрутка

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

Ответ 4

Более новые версии Bootstrap применяют стили как к pre, так и к code, которые переносят слова. Добавление этого в мою таблицу стилей устранило проблему для меня:

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