Тег <pre>: сохранение пробелов и переносов
Как показать многострочный пример без потери отступов и не растянуть мобильную страницу.
Зачем нужен этот элемент
pre сохраняет последовательности пробелов и переносов в текстовом содержимом. Он подходит для кода, вывода команды или схемы, где расположение символов важно. В обычном абзаце несколько пробелов схлопываются, поэтому замена pre на p меняет результат.
HTML внутри pre по-прежнему интерпретируется как разметка. Чтобы показать теги, нужно экранировать их. Длинная строка может оказаться шире экрана; для справочника обычно удобна горизонтальная прокрутка самого блока.
Синтаксис и пример
<style>pre { padding: 16px; background: #eaf4ee; overflow-x: auto; }</style>
<pre><code>project/
index.html
assets/
style.css</code></pre>Что важно в разметке
| Параметр | Как использовать |
|---|---|
| white-space | CSS может дополнительно менять обработку пробелов. |
| overflow-x: auto | Прокрутка длинных строк внутри примера. |
| code | Добавляет семантику программного кода. |
Частая ошибка
Небольшая практика
Добавьте несколько уровней отступов и длинную строку. Проверьте, что горизонтальная прокрутка появляется у примера, а не у всей страницы.
Разберите также <code>, <div>: эти элементы пригодятся в том же интерфейсе.