Как заставить блоки ‹pre› в Twitter Bootstrap прокручиваться по горизонтали?

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


html css twitter-bootstrap pre horizontal-scrolling
person Suan    schedule 29.04.2012    source источник

Ответы (4)


arrow_upward
85
arrow_downward

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

pre {
  overflow: auto;
  word-wrap: normal;
  white-space: pre;
}
person Suan    schedule 29.04.2012
comment
Я бы не рекомендовал переоценивать бутстрап-классы. Вместо этого я бы создал новый файл CSS с именем, например. bootstrap-extras.css и определите новый класс, например. pre-x-scrollable (аналогично их pre-scrollable), который применяет ваше поведение выше. Таким образом, вы не получите конфликтующих классов при обновлении начальной загрузки из исходного кода в будущем. - person tatlar; 29.12.2012
comment
для bootstrap3: pre code и удалите overflow:auto - person Davy Landman; 13.03.2014
comment
Напоминаем, что word-wrap меняется на overflow-wrap в CSS3. - person Alex W; 17.07.2014
comment
Установка white-space: pre-wrap была уловкой для меня, чтобы предварительный блок действительно оборачивался по желанию - person UnionP; 29.08.2017

arrow_upward
25
arrow_downward

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

pre {
    overflow-x: auto;
}
pre code {
    overflow-wrap: normal;
    white-space: pre;
}
person Matt Morey    schedule 07.05.2013
comment
overflow-wrap все еще имеет нестандартная реализация. На данный момент вам следует использовать старую версию word-wrap, которая поддерживается всеми браузерами. - person KyleMit; 02.01.2014
comment
@KyleMit На данный момент вам следует использовать оба. Затем, когда overflow-wrap начнет получать поддержку, вам не придется возвращаться и обновлять весь свой CSS. - person Alex W; 17.07.2014

arrow_upward
16
arrow_downward

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

Итак, у вас есть запас 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;
}
person Rick Glos    schedule 24.09.2015

arrow_upward
2
arrow_downward

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

pre code {
        white-space: pre;
        word-wrap: normal;
}
person jarhill0    schedule 31.03.2018