Как изменить диапазон, чтобы он выглядел как pre с помощью CSS?

108

Можно ли изменить <span>тег (или <div>), чтобы предварительно отформатировать его содержимое, как <pre>тег, используя только CSS?

html css jsight
источник

Ответы:

164

Посмотрите таблицу стилей по умолчанию W3C CSS2.1 или рабочий проект CSS2.2 . Скопируйте все настройки для PRE и поместите их в свой собственный класс.

pre {
    display: block;
    unicode-bidi: embed;
    font-family: monospace;
    white-space: pre;
}
Диодей - Джеймс Макфарлейн
источник
1
Это хорошая идея, чтобы понять, откуда взялись эти значения по умолчанию.
Диодеус - Джеймс Макфарлейн,
2
Когда я пытаюсь это сделать, разрывы строк не сохраняются.
Agnel Kurian
Тег <pre> будет отображать горизонтальные полосы прокрутки, когда текст слишком широкий, но этот CSS - нет. Кто-нибудь знает, как их показать?
shindigo
1
@shindigo Вы пробовали пользоваться overflow: scroll? Или, если вам нужна только горизонтальная прокрутка overflow-x: scroll developer.mozilla.org/en-US/docs/Web/CSS/overflow
Канмури
1
@shindigo overflow: auto;может быть лучше, иначе вы можете получить два набора полос прокрутки, когда они вам не нужны.
Spechal
57

См. Свойство CSS white-space .

.like-pre { white-space: pre; }
Пистос
источник
7
в качестве альтернативы, вы можете найти это white-space: pre-wrapполезным. Он ведет себя как pre, но переносит длинные строки.
Кай Карвер
25

Это делает SPAN похожим на PRE:

span {
  white-space: pre;
  font-family: monospace;
  display: block;
}

Не забудьте изменить селектор CSS соответствующим образом.

Мистер Блестящий и Новый 安 宇
источник
2

Попробуй это

span {
    white-space: pre;
    font-family: monospace;
    display: block;
    unicode-bidi: embed
}
Янни
источник
1

Попробуйте этот стиль

.pre {

white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
line-height: 1.5;   
word-break: break-all;
white-space: pre;
white-space: pre\9; /* IE7+ */
display: block;
}

То же самое и здесь - http://www.makemyshop.in/

Йесу Радж
источник
0

Почему бы просто не использовать тег <pre> вместо тега span? Оба являются встроенными, поэтому оба должны вести себя так, как вы хотите. Если у вас есть проблема с переопределением всего определения <pre>, просто дайте ему class / id.


источник
1
Иногда у вас уже есть промежуток на странице, и вы не можете его изменить, например, если он является частью существующей системы CMS.
Mr. Shiny and New 安 宇
B / c фреймворк отказывается помещать содержимое в мой <pre> так, как я его прошу. Я мог бы обойти это, но это намного сложнее, чем просто установить несколько свойств CSS.
jsight