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

Question

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

Answer 1

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

Answer 2

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

pre{
    white-space: pre-wrap;
}

Answer 3

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

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

Answer 4

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

word-break: keep-all;

Answer 5

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

Ваш отступ останется, и ваш код не будет переноситься словами в середине пути или чего-то еще.

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

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

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

Информацию о том, как скопировать текст в буфер обмена в js, см. В Как скопировать в буфер обмена в JavaScript? .

Однако ...

Я только что проверил блоки кода стека и потока, и они обернулись в tag wrapped in <pre> tag with css ...</p> <pre><code>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.

Answer 6

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

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

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

Answer 7

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

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

Answer 8

Вы можете либо:

pre { white-space: normal; }

для поддержки моноширинного шрифта, но добавьте перенос слов или:

pre { overflow: auto; }

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

Answer 9

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

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

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

Answer 10

попробуйте это:

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