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

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

pre {
    white-space: pre-wrap;
}

С использованием свойства white-space: pre-wrap, текст будет переноситься и при этом сохраняться все пробелы и табуляции, что позволяет сохранить исходный формат текста.

Я обнаружил, что пропуск тега <pre> и использование свойства white-space: pre-wrap на элементе <div> является более эффективным решением.

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

Это позволяет сохранять форматирование текста и правильно обрабатывать переносы строк, при этом обеспечивая большую гибкость в стилизации и использования других свойств CSS.

Этот CSS-код заставляет контент оборачиваться внутри тега pre, не разбивая слова. Используя следующий стиль, вы можете добиться желаемого поведения:

pre {
    white-space: pre-wrap;   /* Позволяет обёртку текста, сохраняя пробелы */
    word-break: keep-all;    /* Предотвращает разбиение слов в области текста */
}

Таким образом, содержимое внутри тега pre будет правильно отображаться с переносами, не разбивая слова на части.

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

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

Это именно то, что мне нужно было. Свойство word-break: keep-all; позволяет избежать разбиения слов, но при этом обеспечивает динамическую ширину в области <pre>.