HTML-элемент<pre> представляет собой предварительно отформатированный текст, который должен быть представлен точно так, как написано в HTML-файле. Текст обычно отображается с использованием непропорционального ("monospace") шрифта. Пробелы внутри этого элемента отображаются как записанные.

Интерактивный пример

<pre>  L          TE    A       A      C    V       R A       DOU       LOU      REUSE      QUE TU      PORTES    ET QUI T'    ORNE O CI     VILISÉ    OTE-  TU VEUX     LA    BIEN    SI      RESPI            RER       - Apollinaire</pre>

pre {  font-size: 0.7rem;  margin: 0;}

Атрибуты

Этот элемент включает в себя толькоглобальные атрибуты.

colsНе стандартно

Содержитпредпочтительное количество символов, которое должна иметь строка. Это был нестандартный синонимwidth. Чтобы добиться такого эффекта, используйте CSSwidth.

width

Содержитпредпочтительное количество символов, которое должна иметь строка. Хотя технически он все ещё реализован, этот атрибут не имеет визуального эффекта; чтобы достичь такого эффекта, используйте CSSwidth.

wrapНе стандартно

Подсказка, указывающая, как должен происходить перенос. В современных браузерах этот атрибут игнорируется, и никакого визуального эффекта не приводит; чтобы достичь такого эффекта, используйте CSSwhite-space.

Пример

HTML

<p>Использовать CSS для изменения цвета шрифта легко.</p><pre>body {  color: red;}</pre>

Результат

Доступность

Важно предоставить альтернативное описание для любых изображений или диаграмм, созданных с использованием предварительно отформатированного текста. Альтернативное описание должно чётко и лаконично описывать содержание изображения или диаграммы.

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

Комбинация элементов<figure> и<figcaption>, дополненнаяid иARIArole иaria-labelledby, позволяет объявить предварительно отформатированный текст как изображение, аfigcaption служит альтернативным описанием изображения.

Пример

<figure role="img" aria-labelledby="cow-caption">  <pre>  ____________________________<  Я эксперт в своей области.  >  ----------------------------         \   ^__^          \  (oo)\_______             (__)\       )\/\                 ||----w |                 ||     ||  </pre>  <figcaption>    Корова говорит: «Я эксперт в своей области». Корова проиллюстрирована с    использованием предварительно отформатированных текстовых символов.  </figcaption></figure>

• MDN Understanding WCAG, Guideline 1.1 explanations
• H86: Providing text alternatives for ASCII art, emoticons, and leetspeak | W3C Techniques for WCAG 2.0

Характеристики

Совместимость с браузерами

Смотрите также

• CSS:white-space,word-break
• Связанный элемент:<code>