Как изменить диапазон, чтобы он выглядел как 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 соответствующим образом.

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

5

В частности, вы смотрите на следующее свойство:

white-space: pre

http://www.quirksmode.org/css/whitespace.html
http://www.w3.org/TR/CSS21/text.html#white-space-prop

— Сорен Куклау
источник

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