Як загорнути текст у попередній тег?

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обговорення тексту та підтримки пробілу в -таг:

pre {
    white-space: pre-wrap;
}

Я виявив, що пропуск попереднього тегу та використання пробілів: попереднє обгортання діва є кращим рішенням.

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

Найкраще, це змушує вміст загортати тег "попередньо", не порушуючи слова. Ура!

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тому що це, звичайно, розбиває слово навпіл, що, мабуть, те, чого ви не хочете.

Найкращий спосіб перехресного веб-переглядача працював для мене, щоб отримати розриви рядків і показувати точний код або текст: (хром, інтернет-провідник, 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

Текст у елементі відображається шрифтом фіксованої ширини (як правило, кур'єрським), і він зберігає як пробіли, так і розриви рядків .

Джерело: w3schools.com , підкреслює зроблене власноруч.