Pre css: Тег | htmlbook.ru — Вебджем.рф | Создание и продвижение сайтов

— HTML — Дока

Кратко
Пример
Как понять
Атрибуты
Подсказки

Кратко

Скопировано

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

Пример

Скопировано

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

Как понять

Скопировано

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

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

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

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

👆

Тег

<pre> хорошо подходит для отображения стихотворений или демонстрации примеров кода.

Атрибуты

Скопировано

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

Подсказки

Скопировано

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

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

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

< (less than — знак «меньше») для левой угловой скобки;
> (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.

Если вы нашли ошибку, отправьте нам пул-реквест!

Во время отправки формы что-то пошло не так. Попробуйте ещё раз?

←

<small>

ctrl + alt + ←

→

<code>

ctrl + alt + →

| HTML | WebReference

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

Синтаксис

<pre>Текст</pre>

Атрибуты

Для этого элемента доступны универсальные атрибуты и события.

Пример

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>PRE</title> </head> <body> <pre> — —— —— |—— ||—-| —-|| ||—— ——|| ||——| |——|| || —— ——|| ||- —-| |——|| ||—||— ——-|| ||—|| —| |——-|| || -|| |— — — —|| || -|| —|-|—| — —| |—|| |——| |——| |—|| |—- |——| |—-| — |——| |—— ——| </pre> </body> </html>

Результат данного примера показан ниже.

Рис. 1. Вид текста, оформленного с помощью <pre>

Спецификация

Спецификация	Статус
WHATWG HTML Living Standard	Живой стандарт
HTML5	Рекомендация
HTML 4.01 Specification	Рекомендация

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры


3	12	1	4	1	1


1	1	6	1

Браузеры

В таблице браузеров применяются следующие обозначения.

— элемент полностью поддерживается браузером;

— элемент браузером не воспринимается и игнорируется;
— при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

См. также

Работа с текстом

Рецепты

Как отобразить теги на веб-странице?
Как сделать перенос строки?

Практика

Элемент <mark>
Элемент <pre>

Элементы HTML

Атрибуты

Значения

Типы элементов

Аудио и видео

Документ

Изображения

Объекты

Скрипты

Списки

Ссылки

Таблицы

Текст

Формы

Фреймы

html — семейство шрифтов тегов и css

спросил 12 лет, 7 месяцев назад

Изменено 9 лет, 5 месяцев назад

Просмотрено 55 тысяч раз

У меня есть html с кодом ниже:

                                       | дата правонарушения | Граф |
   Название, раздел и характер правонарушения | Заключено | Номер(а) |
-------------------------------------------------- ------------------------
              18:2113(a)-ОГРАБАНИЕ БАНКА | 27 января 2009 г.   | я |
-------------------------------------------------- ------------------------

Он отлично работает на простой странице, но когда я добавил css с определением font-family , он работает безобразно, формат уже не опрятный.

Есть предложения? Спасибо!

HTML
CSS

Необходимо использовать моноширинный шрифт (также известный как шрифт пишущей машинки). Это шрифт, в котором все символы занимают одно и то же место.

В CSS имя шрифта моноширинный преобразуется в моноширинный шрифт по умолчанию в пользовательской системе. Рекомендуется включать моноширинный в конец списка семейства шрифтов для элемента

, чтобы его можно было использовать в качестве запасного варианта.

Например:

 pre {семейство шрифтов: Consolas,monospace}

будет использовать моноширинный шрифт Consolas, если он доступен, или вернется к значению по умолчанию.

Удивительно! Когда я разместил этот вопрос, отображение Stackoverflow — это именно то, что я хочу.

Итак, решение:

 предварительно
{
  семейство шрифтов: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, моноширинный, с засечками;
  нижняя граница: 10px;
  переполнение: авто;
  ширина: авто;
  отступ: 5px;
  цвет фона: #eee;
  ширина: 650px!ie7;
  низ отступа: 20px!ie7;
  максимальная высота: 600 пикселей;
}

Определение по умолчанию для 9Тег 0031 до использует моноширинный шрифт (как в консоли).

 семейство шрифтов: моноширинный;

Возможно, ваше определение предполагает другой тип шрифта, поэтому ваш красивый дизайн ломается. Вы должны либо указать системный моноширинный шрифт (например, «Lucida Console»), либо резервный псевдоним «моноширинный»;

Лучший ответ, кажется, Как использовать css для изменения размера шрифта

Из этого ответа: (ссылаясь на текст внутри до )

. ..вы всегда можете поместить этот текст в другой элемент (span, для пример) и измените размер шрифта этого элемента.

(Не забудьте проголосовать за его ответ.)

Не добавлять определение семейства шрифтов для тега pre Удалите его и все будет хорошо Или, если вам нужно использовать определение, не используйте вкладку для вставки пробелов. Используйте пробел только для вставки пробелов. Много работы, но это путь Надеюсь, это поможет

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

html - CSS: тег PRE делает размер карты больше размера контейнера

Задавать вопрос

спросил 1 год, 11 месяцев назад

Изменено 1 год, 11 месяцев назад

Просмотрено 758 раз

У меня есть карта, внутри которой есть тег pre. Проблема в том, что из-за тега pre размер карты становится больше, чем контейнер, и, следовательно, на моей веб-странице появляется горизонтальная полоса прокрутки. Что мне сделать, чтобы прокрутить предварительный тег, если размер содержимого больше, чем карта? Точно так же, как фрагменты кода в ответах на stackoverflow. Они никогда не выходят за пределы страницы по горизонтали, вы получаете горизонтальную полосу прокрутки внутри фрагмента.

CSS:

 .main {
    ширина: 100%;
    цвет фона: зеленый;
    дисплей: гибкий;
    flex-направление: строка;
    выравнивание содержимого: растянуть;
    выравнивание элементов: flex-start;
    отступ: 20 пикселей;
    -webkit-box-sizing: рамка-бокс;
    -moz-box-sizing: рамка-бокс;
    box-sizing: граница-коробка;
}
.меню {
    ширина: 200 пикселей;
    высота: 300 пикселей;
    цвет фона: красный;
    гибкий рост: 0;
    гибкая усадка: 0;
}
.card-контейнер {
    -webkit-box-sizing: рамка-бокс;
    -moz-box-sizing: рамка-бокс;
    box-sizing: граница-коробка;
    цвет фона: синий;
    высота: 500 пикселей;
    дисплей: гибкий;
    гибкий: 1;
    flex-направление: столбец;
    выравнивание элементов: растянуть;
    выравнивание содержимого: flex-start;
}
. карта {
    положение: родственник;
    гибкий рост: 1;
    гибкая термоусадка: 1;
    flex-основа: 0;
    поле: 20 пикселей;
    цвет фона: желтый;
    максимальная ширина: авто; высота: 300 пикселей;
}
предварительно {
    цвет фона: черный;
    белый цвет;
    переполнение: прокрутка;
}

HTML:

<голова> <мета-кодировка="UTF-8"> Документ <тело> <дел> <дел> <дел> <дел>

Заголовок

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iste quaerat earum cum dolore saepe eius dignissimos porro, natus ut omnis maiores deleniti repudiandae differentio quod? Vero tempore Laboriosam maxime quidem accusantium ea qui enim doloremque? Maxime accusantium fuga Inventore veniam vero quaerat possimus, id magni consectetur, omnis obcaecati recusandae ipsam.

<пред> Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa placeat quia cum, corporis amet quas repellat, nostrum Inventore numquam accusamus possimus minima maxime error iusto obcaecati consequuntur fugiat magnam. Временный автобус?

Pre css: Тег | htmlbook.ru

— HTML — Дока

Кратко

Пример

Как понять

Атрибуты

Подсказки

| HTML | WebReference

Синтаксис

Атрибуты

Пример

Спецификация

Браузеры

См. также

Рецепты

Практика

Элементы HTML

Атрибуты

Значения

Типы элементов

html — семейство шрифтов тегов и css

Зарегистрируйтесь или войдите в систему

Опубликовать как гость

Опубликовать как гость

html - CSS: тег PRE делает размер карты больше размера контейнера

Заголовок

Добавить комментарий Отменить ответ

Рубрики