<pre>: Предварительно отформатированный текстовый элемент

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since июль 2015 г..

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;
}

Категории контента Основной поток, Явный контент

Допустимое содержимое	Фразовый контент
Пропуск тегов	Нет, открывающий и закрывающий теги обязательны.
Допустимые родители	Любой элемент, который принимает содержимое потока
Неявные ARIA-роли	Нет соответствующей роли
Допустимые ARIA-роли	Любые
DOM-интерфейс	HTMLPreElement

Атрибуты

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

cols

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

width

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

wrap

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

Пример

HTML

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

Результат

Доступность

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

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

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

Пример

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

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

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on 15 апр. 2025 г. by MDN contributors.

View this page on GitHub • Report a problem with this content

<pre>: Предварительно отформатированный текстовый элемент

In this article

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

Атрибуты

Пример

HTML

Результат

Доступность

Пример

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

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

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

Help improve MDN