Как сделать так, чтобы блоки <pre> Twitter Bootstrap прокручивались горизонтально?

Question

Согласно примерам http://twitter.github.com/bootstrap/base-css.html, bootstrap поддерживает только вертикальную прокрутку и перенос слов. <pre> блоки из коробки. Как мне сделать так, чтобы вместо этого у меня были горизонтально прокручиваемые, развернутые блоки кода?

Answer 1

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

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

Answer 2

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

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

Answer 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;
}

Answer 4

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

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