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

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

Ответ, с этой страницы в 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+ */
}

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

pre {
    white-space: pre-wrap;
}

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

 <div style="white-space: pre-wrap;">content</div>

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

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

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

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

word-break: keep-all;

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

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

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

Ниже приведена выдержка из 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.

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

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

</pre>

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

pre { white-space: normal; }

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

pre { overflow: auto; }

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

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

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

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

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

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

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>

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

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

Спасибо

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

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

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