Как обернуть текст в тег pre?

Ответ 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+ */
}

Ответ 2

Это отлично работает, чтобы обернуть текст и сохранить пробел в pre -tag:

pre{
    white-space: pre-wrap;
}

Ответ 3

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

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

Ответ 4

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

word-break: keep-all;

Ответ 5

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

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

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

Ниже приведен фрагмент 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/.

Хорошая настройка, но Im просто идет с текстовыми полями.

Ответ 6

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

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

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

Ответ 7

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

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

</pre>

Ответ 8

Вы можете:

pre { white-space: normal; }

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

pre { overflow: auto; }

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

Ответ 9

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

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

Или лучше бросить CSS.

Ответ 10

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

  pre {
        white-space: pre-wrap;       /* CSS 3 */
        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+ */
        padding:0px;
        margin:0px
    }

Ответ 11

Мне помогли следующее:

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

Спасибо

Ответ 12

Лучший способ перекрестного браузера помог мне получить разрывы строк и показать точный код или текст: (chrome, Internet explorer, Firefox)

CSS

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

HTML:

<xmp> your text or code </xmp>

Ответ 13

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

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

Ответ 14

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

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

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