/ ↲
    Расширенный поиск

    HTML

    <pre>

    Отображает текст без обработки — сохраняя пробелы и переносы.

    Время чтения: меньше 5 мин

    Кратко

    Скопировано

    Тег <pre> (от английского preformatted text) нужен для отображения предварительно отформатированного текста, если необходимо сохранить все пробелы и переносы в HTML.

    Пример

    Скопировано
            
          
          <pre aria-label="Изображение кота, собранное из текстовых символов.">  ../\„„./\.  .(='•'= ) .  .(") „. (").  . \,\„„/,/  . │„„. „│  . /„/„ \„\  .(„)''l l''(„)  . .. ((...  . . . ))..  . . .((..</pre>
          <pre aria-label="Изображение кота, собранное из текстовых символов.">
  ../\„„./\.
  .(='•'= ) .
  .(") „. (").
  . \,\„„/,/
  . │„„. „│
  . /„/„ \„\
  .(„)''l l''(„)
  . .. ((...
  . . . ))..
  . . .((..
</pre>

    Как понять

    Скопировано

    В HTML-коде браузер схлопывает все пробелы в один и игнорирует переносы строк.

    Если поместить нашего котика в обычный <div>, мы увидим его таким:

    ../\„„./\. .(='•'= ) . .(") „. ("). . \,\„„/,/ . │„„. „│ . /„/„ \„\ .(„)''l l''(„) . .. ((... . . . )).. . . .((..

    Чтобы сохранить изначальное форматирование как в HTML, можно воспользоваться тегом <pre>.

    Атрибуты

    Скопировано

    К тегу <pre> можно применить все глобальные атрибуты.

    Подсказки

    Скопировано

    💡 По умолчанию для отображения текста в теге <pre> браузеры используют моноширинные системные шрифты под общим названием monospace.

    💡 Для вывода кода нужно дополнительно обернуть содержимое тега <pre> в тег <code>, чтобы подчеркнуть, что внутри именно код, а не схематичный котик или стихотворение.

    💡 При демонстрации внутри тега <pre> HTML-кода могут возникнуть проблемы с отображением тегов в угловых скобках — браузер посчитает их настоящими тегами. Чтобы решить проблему, воспользуйтесь мнемоническими подстановками:

    • &lt; (less than — знак «меньше») для левой угловой скобки;
    • &gt; (greater than — знак «больше») для правой угловой скобки.
            
          
          <pre><code>  &lt;div&gt;Какой-то текст&lt;/div&gt;</code></pre>
          <pre><code>
  &lt;div&gt;Какой-то текст&lt;/div&gt;
</code></pre>

    💡 Схлопывание пробелов и переносов строк вне тега <pre> также можно избежать с помощью CSS, а именно свойства white-space: pre.

    💡 Слишком длинные строчки могут выходить за пределы тега <pre>, решить проблему поможет CSS, а именно добавление прокрутки – overflow: auto, или переноса строк – white-space: pre-wrap.

    Читайте также