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

Пройдите тест, узнайте какой профессии подходите и получите бесплатную карьерную консультацию
В конце подарим скидку до 55% на обучение
Я предпочитаю
0%
Работать самостоятельно и не зависеть от других
Работать в команде и рассчитывать на помощь коллег
Организовывать и контролировать процесс работы

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

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

CSS
Скопировать код
pre { white-space: pre-wrap; }

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

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

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

Пройдите тест и узнайте подходит ли вам сфера IT
Пройти тест

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

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

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

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

CSS
Скопировать код
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:

CSS
Скопировать код
pre {
  white-space: pre-wrap;
  word-break: keep-all;
}

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

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

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

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

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

С переносом:

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

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

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

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

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

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

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

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

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

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

CSS
Скопировать код
.prettyprint-override {
   white-space: pre-wrap;
   word-wrap: break-word;
   word-break: keep-all;
}

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

HTML
Скопировать код
<pre class="prettyprint-override">Здесь ваш текст...</pre>

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

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

CSS
Скопировать код
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.