Тег <pre>
Описание
Тег <pre> (от англ. "preformatted text") определяет предварительно форматированный текст, который должен быть отображен точно так, как он записан в HTML-коде, включая все пробелы и переносы строк. Это блочный элемент, который обычно отображается моноширинным шрифтом.
<pre>
Текст сохраняет
все пробелы
и переносы строк
</pre>
<pre><code>
function helloWorld() {
console.log("Hello, World!");
return true;
}
</code></pre>
Ключевые особенности:
- Сохранение оригинального форматирования текста
- Отображение моноширинным шрифтом (по умолчанию)
- Автоматическая прокрутка для длинных строк
- Часто используется в сочетании с
<code> - Поддержка всех пробелов и переносов строк
Рекомендации по использованию:
- Используйте для отображения кода, ASCII-арта, логов
- Для длинных строк добавляйте
overflow-x: auto - Сочетайте с
<code>для семантической разметки кода - Избегайте вложенных блочных элементов
- Для табличных данных используйте
<table>
<pre>
/\_/\
( o.o )
> ^ <
|||
/ | \
</pre>
Тег <pre> является незаменимым инструментом для отображения предварительно форматированного текста, особенно полезным при публикации фрагментов кода, технической документации и любых текстов, где важно сохранить оригинальное форматирование.
Атрибуты
| accesskey | Горячая клавиша для активации |
| class | CSS-классы для стилизации |
| contenteditable | Разрешает редактирование |
| data-* | Пользовательские данные |
| dir | Направление текста |
| hidden | Скрывает элемент |
| id | Уникальный идентификатор |
| lang | Язык содержимого |
| spellcheck | Проверка орфографии |
| style | Инлайновые стили |
| tabindex | Порядок перехода |
| title | Всплывающая подсказка |
| translate | Определяет возможность перевода |
| width | Ширина элемента (устарел) |
Поддержка браузерами
 |
 |
 |
 |
 |
|---|---|---|---|---|
| 1.0 | 1.0 | 1.0 | 1.0 | 1.0 |