Перенос текста внутри тега <pre> в HTML без скролла

Быстрый ответ

Чтобы обеспечить перенос текста в элементе <pre>, пропишите для свойства CSS white-space значение pre-wrap:

pre { white-space: pre-wrap; }

Также, это можно указать непосредственно внутри HTML:

<pre style="white-space: pre-wrap;">Здесь ваш текст...</pre>

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

Обеспечение кросс-браузерной совместимости

pre-wrap хорошо работает в большинстве современных браузеров, однако для некоторых устаревших версий возможно потребуется дополнительная настройка.

• Mozilla: Для старых версий Mozilla используйте -moz-pre-wrap;.
• Opera: До 6-й версии включительно укажите -pre-wrap;, начиная с 7-й — -o-pre-wrap;.
• Internet Explorer: С версии 5.5 и выше применяется word-wrap: break-word; для корректного переноса.

Для гарантии поддержки всеми браузерами добавьте:

pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  -moz-pre-wrap: pre-wrap;
  -o-pre-wrap: pre-wrap;
}

Предотвращение нежелательного переноса внутри слов

Чтобы избежать разрыва слов при переносе текста в <pre>, примените word-break: keep-all;.

Пример реализации в CSS:

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

Визуализация

Рассмотрим пример переноса текста:

Представим узкую улицу (это будет наш элемент `<pre>`) и колонну (ваш текст), идущую по ней.

Без переноса:

🛣️[🥁🎺🎷🎸🎻...🏁] // Музыканты не помещаются на ширину улицы!

С переносом:

<pre style="white-space: pre-wrap;">
🛣️[🥁🎺🎷🎸
🎻...🏁] // Все музыканты аккуратно расположены на улице!
</pre>

Иллюстрация эффекта:

Без переноса:   🛣️🥁🎺🎷🎸🎻...🏁🌳(куда же они делись?)
С переносом:     🛣️🥁🎺 🎷
               🎸🎻...🏁 👏

Свойство white-space: pre-wrap; позволяет уместить весь текст в пределах контейнера.

Замена pre на div с целью избежания горизонтального прокручивания

Заменив <pre> на <div>, вы сможете избавиться от горизонтального скролла, сохранив форматирование:

<div style="white-space: pre-wrap; font-family: monospace;">
  Форматированный текст без скролла...
</div>

Такой подход сохраняет форматирование, улучшая при этом контроль над версткой.

Создание отдельного класса для большей гибкости

Если на вашем сайте есть несколько элементов <pre> с различным стилем, пользовательский CSS-класс может упростить управление ими:

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

Примените этот класс к элементам <pre>:

<pre class="prettyprint-override">Здесь ваш текст...</pre>

Поддержка удобочитаемости при переносе

Используя white-space: pre-wrap; в сочетании с word-break: keep-all;, можно достичь красивого и легко читаемого переноса текста:

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

Полезные материалы

1. Make "Pre" Text Wrap | CSS-Tricks — подробное руководство по переносу текста от CSS-Tricks.
2. <pre>: Элемент Preformatted Text – HTML | MDN — все о <pre> на MDN.
3. html – Как перенести текст внутри тега pre? – Stack Overflow — обсуждение переноса текста в <pre> на Stack Overflow.
4. HTML pre tag — руководство по элементу <pre> от W3Schools.
5. Php://input example – PHP – SitePoint Forums — использование переноса текста в ссылках, обсуждение на форуме SitePoint.
6. Web Design Blog | WDD — секреты переноса кода в HTML от Webdesigner Depot.