Элемент HTML <pre>
представляет собой предварительно отформатированный текст, который должен быть представлен точно так, как написано в HTML-файле. Текст обычно отображается с использованием непропорционального ("monospace") шрифта. Пробелы внутри этого элемента отображаются как записанные.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Категории контента | Основной поток, Явный контент |
---|---|
Разрешенный контент | Фразовый контент |
Tag omission | Нет, открывающий и закрывающий теги обязательны. |
Разрешенные родители | Любой элемент, который принимает содержимое потока |
Неявная роль ARIA | Нет соответствующей роли |
Разрешенные роли ARIA | Любые |
Интерфейс DOM | HTMLPreElement |
Атрибуты
Этот элемент включает в себя только глобальные атрибуты.
cols
- Содержит предпочтительное количество символов, которое должна иметь строка. Это был нестандартный синоним
width
. Чтобы добиться такого эффекта, используйте CSSwidth
. width
- Содержит предпочтительное количество символов, которое должна иметь строка. Хотя технически он все еще реализован, этот атрибут не имеет визуального эффекта; чтобы достичь такого эффекта, используйте CSS
width
. wrap
- Подсказка, указывающая, как должен происходить перенос. В современных браузерах этот атрибут игнорируется, и никакого визуального эффекта не приводит; чтобы достичь такого эффекта, используйте CSS
white-space
.
Пример
HTML
<p>Использовать CSS для изменения цвета шрифта легко.</p>
<pre>
body {
color: red;
}
</pre>
Результат
Проблемы доступности
Важно предоставить альтернативное описание для любых изображений или диаграмм, созданных с использованием предварительно отформатированного текста. Альтернативное описание должно четко и лаконично описывать содержание изображения или диаграммы.
Люди, испытывающие проблемы с плохим зрением и просматривающие страницы с помощью вспомогательных технологий, таких как программа чтения с экрана, могут не понимать, что представляют собой предварительно отформатированные текстовые символы, когда они читаются последовательно.
Комбинация элементов <figure>
и <figcaption>
, дополненная id
и ARIA role
и aria-labelledby
, позволяет объявить предварительно отформатированный текст как изображение, а figcaption
служит альтернативным описанием изображения.
Пример
<figure role="img" aria-labelledby="cow-caption"> <pre> ____________________________ < Я эксперт в своей области. > ---------------------------- \ ^__^ \ (oo)\_______ (__)\ )\/\ ||----w | || || </pre> <figcaption id="cow-caption"> Корова говорит: «Я эксперт в своей области». Корова проиллюстрирована с использованием предварительно отформатированных текстовых символов. </figcaption> </figure>
Характеристики
Спецификация | Статус | Комментарий |
---|---|---|
HTML Living Standard Определение '<pre>' в этой спецификации. |
Живой стандарт | No significant change from HTML5 |
HTML5 Определение '<pre>' в этой спецификации. |
Рекомендация | No significant change from HTML 4.01 Specification |
HTML 4.01 Specification Определение '<pre>' в этой спецификации. |
Рекомендация | Deprecated the cols attribute |
Совместимость браузера
BCD tables only load in the browser
Смотреть также
- CSS:
white-space
,word-break
- Связанный элемент:
<code>