Как изменить диапазон, чтобы он выглядел как предварительный с помощью CSS?
Ответы 8
Посмотрите на Таблица стилей по умолчанию W3C CSS2.1 или CSS2.2 Рабочий проект. Скопируйте все настройки для PRE и поместите их в свой собственный класс.
pre {
display: block;
unicode-bidi: embed;
font-family: monospace;
white-space: pre;
}
Когда я пытаюсь это сделать, разрывы строк не сохраняются.
Тег <pre> будет отображать горизонтальные полосы прокрутки, когда текст слишком широкий, но этот CSS - нет. Кто-нибудь знает, как их показать?
@shindigo Вы пробовали использовать overflow: scroll? Или, если вам нужна только горизонтальная прокрутка overflow-x: scrolldeveloper.mozilla.org/en-US/docs/Web/CSS/overflow
@shindigo overflow: auto; может быть лучше, иначе вы можете получить два набора полос прокрутки, когда они вам не нужны.
См. свойство CSS белого пространства.
.like-pre { white-space: pre; }
в качестве альтернативы вам может пригодиться white-space: pre-wrap. Он ведет себя как pre, но переносит длинные строки.
В частности, вы смотрите на недвижимость:
white-space: pre
http://www.quirksmode.org/css/whitespace.html
http://www.w3.org/TR/CSS21/text.html#white-space-prop
Почему бы просто не использовать тег <pre> вместо тега span? Оба являются встроенными, поэтому оба должны вести себя так, как вы хотите. Если у вас есть проблема с переопределением всего определения <pre>, просто дайте ему class / id.
Иногда у вас уже есть промежуток на странице, и вы не можете его изменить, например, если он является частью существующей системы CMS.
B / c фреймворк отказывается помещать содержимое в мой <pre> так, как я его прошу. Я мог бы обойти это, но это намного сложнее, чем просто установить несколько свойств CSS.
Это делает SPAN похожим на PRE:
span {
white-space: pre;
font-family: monospace;
display: block;
}
Не забудьте изменить селектор css соответствующим образом.
Попробуй это
span {
white-space: pre;
font-family: monospace;
display: block;
unicode-bidi: embed
}
Попробуйте этот стиль
.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/
хотя принятый ответ действительно правильный, если вы хотите, чтобы текст был перенесен, вы должны использовать:
white-space: pre-wrap;
Это хорошая идея, чтобы понять, откуда взялись эти значения по умолчанию.