Как мне обернуть текст в предварительный тег?

722

pre теги очень полезны для блоков кода в HTML и для отладки вывода при написании сценариев, но как сделать перенос текста вместо вывода одной длинной строки?

adambox
источник

Ответы:

1011

Ответ, с этой страницы в CSS:

pre {
    white-space: pre-wrap;       /* Since CSS 2.1 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
}
adambox
источник
7
white-space:pre-line;(и все совместимые с браузером варианты) кажется более адекватным в некоторых случаях (например, без вкладок), поскольку он убирает пробел в начале строки (если таковые имеются)
MediaVince
5
@MediaVince, pre-lineсворачивает все пробелы (не только в начале строки). developer.mozilla.org/en-US/docs/Web/CSS/white-space содержит таблицу, обобщающую поведение white-spaceзначений.
Пол
1
word-wrap: break-wordне делает то, о чем спрашивает вопрос, он вызывает перенос строк даже между словами. Вы можете удалить эту строку. В современных браузерах вам не нужны какие- -mozлибо префиксы.
Flimm
141

Это прекрасно работает для переноса текста и сохранения пробелов внутри pre-tag:

pre {
    white-space: pre-wrap;
}
Ричард МакКечни
источник
3
Это потому, что это только CSS 3 - смотрите ответ от adambox для большей совместимости.
Обезьяна Lorem
60

Я обнаружил, что пропуск тега pre и использование пробела: предварительная упаковка в div - лучшее решение.

 <div style="white-space: pre-wrap;">content</div>
Mason240
источник
3
Проще, чем популярный ответ. Спасибо!
Рики
4
В моем случае я хотел показать предварительно отформатированный текст, который содержал вкладки, чтобы составить какую-то таблицу. Я использовал ваше решение ПЛЮС Я добавил моноширинный шрифт, чтобы все столбцы были выровнены:style="white-space: pre-wrap; font-family:monospace;"
Jan
1
Хотя это может быть проще, может быть больше смысла в использовании <pre>для блоков кода.
Ангелос Чаларис
2
Я знаю это, я опаздываю к этой игре, но почему это решение лучше, чем установить его один раз в таблице стилей? У меня есть несколько div на одном экране вывода HTML, который будет нуждаться в этом. Похоже, одно исправление элемента в таблице стилей устраняет все проблемы.
webfrogs
1
@webfrogs Да, лучше создать класс .prewrap.
Mason240
36

Вкратце, это заставляет содержимое переносить тег «pre» без слов. Ура!

pre {
  white-space: pre-wrap;
  word-break: keep-all
}

Смотрите живой пример здесь .

Эрин Делакруа
источник
20

Это то, что мне было нужно. Это препятствовало тому, чтобы слова ломались, но учитывало динамическую ширину в предварительной области.

word-break: keep-all;
user1433454
источник
17

Я предлагаю забыть заранее и просто положить его в текстовое поле.

Ваш отступ останется, и ваш код не будет заключен в слова или что-то в этом роде.

Проще выделить текстовый диапазон в текстовой области, если вы хотите скопировать в буфер обмена.

Ниже приведена выдержка из php, так что если вы не в php, то способ упаковки специальных символов html будет отличаться.

<textarea style="font-family:monospace;" onfocus="copyClipboard(this);"><?=htmlspecialchars($codeBlock);?></textarea>

Для получения информации о том, как скопировать текст в буфер обмена в js, смотрите: Как мне скопировать в буфер обмена в JavaScript? ,

Однако...

Я только что проверил блоки кода stackoverflow и они обертывают тег <code>, обернутый в тег <pre> с помощью css ...

code {
  background-color: #EEEEEE;
  font-family: Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;
}
pre {
  background-color: #EEEEEE;
  font-family: Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;
  margin-bottom: 10px;
  max-height: 600px;
  overflow: auto;
  padding: 5px;
  width: auto;
}

Также содержимое блоков кода stackoverflow выделено синтаксисом с использованием (я думаю) http://code.google.com/p/google-code-prettify/ .

Это хорошая установка, но сейчас я просто собираюсь с textareas.

ekerner
источник
13
Не будет ли использование текстовых областей для чего-то другого, кроме ввода, семантически некорректным? Похоже, странное решение для меня.
Джош М.
2
Не так семантически неверно, как добавление набора стилей форматирования к тегу «pre», когда «pre» предполагает, что содержащийся текст предварительно отформатирован и, следовательно, не требует дополнительного форматирования и его лучше воспринимать как есть;) Я предлагаю не дать «семантике» приоритет над «функциональной».
ekerner,
1
Я не думаю, что <pre>имеет какое-либо семантическое значение (в отличие от <code>), это просто означает, что должны быть сохранены новые строки и несколько пробелов.
Flimm
1
Его сокращение от «предварительно отформатированный». Вы предлагаете, чтобы на самом деле он был коротким только для предварительно отформатированных строк новой строки и нескольких пробелов?
ekerner
Тип содержимого определяется внутренним тегом, в зависимости от типа предварительно отформатированного текста. Я хотел бы отослать своих друзей на вики-страницу предварительного тега w3c: w3.org/wiki/HTML/Elements/pre
joshperry
14

Я объединил ответы @richelectron и @ user1433454.
Работает очень хорошо и сохраняет форматирование текста.

<pre  style="white-space: pre-wrap; word-break: keep-all;">

</pre>
vovahost
источник
13

Вы также можете:

pre { white-space: normal; }

сохранить моноширинный шрифт, но добавить перенос слов или:

pre { overflow: auto; }

что позволит фиксированный размер с горизонтальной прокруткой для длинных строк.

Бобби Джек
источник
О, спасибо за напоминание о переполнении! Отлично подходит для мобильных дисплеев.
XTL
6

Попробуйте использовать

<pre style="white-space:normal;">. 

Или лучше скинуть CSS.

Эдуардо Кампаньо
источник
кажется, это работает в IE 7, но не в 6. Это единственное предложение, которое показалось многообещающим для IE ... все остальные предложения были хорошими для других браузеров ...
topwik
никогда не должно было быть кеширование браузера. перезапустил IE 6 и все хорошо. веселит.
topwik
2
Проблема с этим решением в том, что он также растворяет символы новой строки ... Например, любое разделение текста на абзацы будет потеряно.
Крис У.
4

Используйте white-space: pre-wrapи некоторые префиксы для автоматического разрыва строки внутри pres.

Не используйте, word-wrap: break-wordпотому что это просто, конечно, разбивает слово пополам, что, вероятно, то, что вы не хотите.

FryingggPannn
источник
3

Best Cross Browser Way помог мне найти разрывы строк и показать точный код или текст: (Chrome, Internet Explorer, Firefox)

CSS:

xmp{ white-space:pre-wrap; word-wrap:break-word; }

HTML:

<xmp> your text or code </xmp>
feacco
источник
Отлично сработало
7
xmp устарела с HTML 3.2, полностью удалена из HTML5 и с самого начала никогда не работала должным образом. Это не было реализовано последовательно среди различных браузеров.
PeterToTheThird
Использование пробела: предварительная упаковка; и перенос слов: брейк-слово; в моем css хранит отступы (json) фрагментов, предварительная строка удаляет это. (Chrome)
Питер Виссер
1

Следующее помогло мне:

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

Спасибо

prashant2402
источник
3
Я думаю, что лучше использовать, white-space: pre-wrap;потому что он уважает пробелы
Иван Феррер Вилла
-1

<pre>-Элементные означает «предварительно отформатированный текстом» и предназначен , чтобы сохранить форматирование текста (или любой другой ) между его тегами. Поэтому на самом деле он не предназначен для автоматического переноса слов или переносов строк внутри <pre>-Tag

Текст в элементе отображается шрифтом фиксированной ширины (обычно Courier), и он сохраняет как пробелы, так и разрывы строк .

Источник: w3schools.com , подчеркивает сделанные мной.

rob_st
источник
В нем просто констатируется тот факт, что возможно автоматическое обертывание текста внутри предварительного тега, хотя автоматическое обертывание предварительного тега не предназначено.
rob_st
Это единственный правильный ответ на вопрос автора. Любой другой ответ или возможное «решение» поощряет неправильное использование элемента <pre>. По сути, если вы хотите поместить тип внутри элемента <pre> и заключить его в оболочку, используйте вместо него тег <p> и стилизуйте его любым удобным для вас классом CSS.
Маркус
Я не уверен, почему люди считают полезным давать такой совет "Я умнее тебя". Нет, тег <p> не является подходящей заменой: он не сохраняет ни пробелов, ни разрывов строк. Тег <pre> полезен для сохранения разрывов строк, но иногда необходимо добавить дополнительную перенос, так же, как любой редактор кода может и сохранить разрывы строк, и добавить перенос для длинных строк.
ДВК