Тег | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Спецификация
| HTML: | 3.2 | 4.01 | 5.0 | XHTML: | 1.0 | 1.1 |
Описание
Элемент <pre> определяет блок предварительно форматированного текста. Такой текст отображается обычно моноширинным шрифтом и со всеми пробелами между словами. По умолчанию, любое количество пробелов идущих в коде подряд, на веб-странице показывается как один. Тег <pre> позволяет обойти эту особенность и отображать текст как требуется разработчику. В отличие от тега <plaintext>, использование которого осуждается в HTML 4, внутри контейнера <pre> допустимо применять любые теги кроме следующих: <big>, <img>, <object>, <small>, <sub> и <sup>.
Синтаксис
<pre>Текст</pre>Закрывающий тег
Обязателен.
Атрибуты
Для этого тега доступны универсальные атрибуты и события.
Пример
HTML5IECrOpSaFx
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Тег PRE</title> </head> <body> <pre> - ----- ----- |----- ||----| ----|| ||----- -----|| ||-----| |-----|| || ----- ------|| ||- ----| |------|| ||---||-- -------|| ||--|| --| |-------|| || -|| |-- --- - --|| || -|| --|-|--| - ---| |---|| |-----| |-----| |---|| |---- |-----| |----| --- |-----| |----- ------| </pre> </body> </html>
Результат данного примера показан ниже.
Рис. 1. Вид текста, оформленного с помощью тега <pre>
htmlbook.ru
PRE и NOWRAP в CSS — свойство white-space: pre-wrap, nowrap, pre-line
19 февраля 2010 Рубрика: HTML&CSS, Важные мелочи
Пишу в качестве напоминания, что в CSS есть аналог тегов <PRE> и <NOBR>, а также свойства таблиц NOWRAP — название ему white-space. Это свойство устанавливает, как отображать пробелы в тексте, а именно:
white-space: normal. Значение по умолчанию, текст ведёт себя как обычно.
white-space: nowrap. Текст идёт одной строкой, переносов не происходит, за исключением вручную расставленных, например, тегом <br>. Если обрамить текст тегом nobr (<nobr>текст</nobr>), то мы получим тот же эффект, что и через свойство css. Аналогично достигается в таблице путём дописки параметра nowrap в теге td. Так что всё на вкус и на цвет, а что использовать — решать вам.
white-space: pre. Выводит текст с пробелами и переносами, как оно было оформлено в коде html. Если строка будет слишком длинной и не помещаться в окно браузера, то появится горизонтальная полоса прокрутки. Имеется два нюанса: 1) аналогом является тег <pre>, но, в отличие от него, не меняет шрифт на моноширинный; 2) не работает в IE6 и младше; 3) работает в IE7 только при указании <!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>.
white-space: pre-wrap. Выводит текст с пробелами и переносами, но если строка слишком длинная, то происходит перенос. Не поддерживается IE7 и младше.
white-space: pre-line. Выводит текст с переносами, как было в коде html, но дополнительные пробелы игнорируются (последовательность пробелов отображается как один пробел). Линии также подгоняются по размеру. Не поддерживается IE7 и младше.
В общем, white-space: pre и white-space:nowrap имеют место для частого использования (особенно второй, так как кроссбраузерен), а два последних под вопросом. Тем не менее.
В рамках white-space опишу одну проблему, возникающую с хайлайтерами (скрипты, которые подсвечивают код в блогах) — текст в тегах PRE не переносится, а скролится. Для этого был создан универсальный метод (ссылка на оригинал), который я ниже и приведу.
pre {
white-space: pre; /* CSS2 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 2.1/3 */
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -hp-pre-wrap; /* HP printers */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: -pre-wrap; /* Opera 4-6 */
word-wrap: break-word; /* Только для динозавра IE */
}
Это наиболее полный код, однако и его можно сократить. Для начала удалим вторую строку, так как она бесполезна — зачем говорить тегу pre, чтобы он вёл себя как тег pre. Четвёртую строку тоже можно удалить, так как свойство удаляет дополнительные пробелы, а они нужны. Шестую строку также можно опустить, сами догадайтесь почему. По большому счёту можно вообще оставить только третью и девятую строки, так как даже седьмая опера уже канула в лету.
Пожалуй это всё, что нужно знать о white-space. До новых встреч! =)
CSS
Похожие записи:
| HTML | WebReference
Элемент <pre> (от англ. preformatted text — форматированный текст) определяет блок предварительно форматированного текста. Такой текст отображается обычно моноширинным шрифтом и со всеми пробелами между словами. По умолчанию, любое количество пробелов идущих в коде подряд, на веб-странице показывается как один. Элемент <pre> позволяет обойти эту особенность и отображать текст как требуется разработчику.
Закрывающий тег
Пример
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>PRE</title>
</head>
<body>
<pre>
- -----
----- |-----
||----| ----||
||----- -----||
||-----| |-----||
|| ----- ------||
||- ----| |------||
||---||-- -------||
||--|| --| |-------||
|| -|| |-- --- - --||
|| -|| --|-|--| - ---|
|---|| |-----| |-----|
|---|| |---- |-----|
|----| --- |-----|
|----- ------|
</pre>
</body>
</html>Результат данного примера показан ниже.
Рис. 1. Вид текста, оформленного с помощью <pre>
Спецификация ?
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.
×Браузеры
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
×Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 09.10.2018
Редакторы: Влад Мержевич
webref.ru
Тег | HTML справочник
Поддержка браузерами
Описание
HTML тег <pre> определяет блок в который помещают предварительно отформатированный текст. Браузер отображает содержимое тега именно так, как вы его напечатали, включая все пробельные символы. Обычно при выводе на экран отформатированного текста используется моноширинный шрифт. Внутри тега <pre> допустимо использовать другие элементы для форматирования текста, например: <code>, <b>, <i> и др.
Вот некоторые примеры случаев, когда элемент <pre> может быть использован:
- для печати стихов, в которых взаимное расположение строк задал сам автор
- отображение ASCII рисунков
- отображение отформатированного фрагмента программного кода какого-нибудь языка программирования
Примечание: предположим вы решили описать какой-нибудь HTML-код, вы его отформатировали как вам нравится, но есть одна проблемка, вы его не сможете вывести поскольку браузер использует символы < и > как начало и конец тега, применение их внутри тега <pre> может привести к проблемам. Однако есть легкий способ справиться с этим и вывести ваш код на экран, нужно всего лишь воспользоваться ссылками на символы, с помощью которых можно указать угловые скобки и любые другие спецсимволы.
Атрибуты
Тег <pre> поддерживает Глобальные атрибуты и События
Стиль по умолчанию
pre {
display: block;
font-family: monospace;
white-space: pre;
margin: 1em 0;
}
Пример
<pre>
.-.
__ / \ __
( `'.\ /.'` )
'-._.(;;;)._.-'
.-' ,`"`, '-.
(__.-'/ \'-.__)
\ /\
'-' \
, |
|\ |
\ | |
| \ /
\|/ _,
/ __/ /
| _/ _.'
|/__/
\
</pre>
Результат данного примера в окне браузера:
puzzleweb.ru
Поговорим о свойстве white-space | CSS-Tricks по-русски
Поговорим о свойстве white-space
В CSS есть такое полезное свойство, как white-space, которое остаётся без внимания у начинающих верстальщиков. Возможно, вы обходились без него довольно долго, но однажды узнав, что это такое, и как его использовать, вы поймёте как много вы потеряли.
В этой статье я постараюсь описать, в чём разница между различными значениями свойства и как они могут быть использованы.
Немного об HTML.
В HTML, всякий раз когда вы оставляете подряд несколько пробелов (табов или переводов строки), браузер, по умолчанию, будет выводить их как один единственный пробел. Такое поведение позволяет браузеру отделять и размещать элементы наиболее удобным для прочтения способом.
Если вы хотите чтобы все ваши пробелы и переводы строк отображались как в исходном HTML, то вам необходимо использовать тег pre, всё содержимое которого будет отображаться в соответствии с исходным кодом страницы.
Кроме того, можно воспользоваться неразрывным пробелом ( ), в случае, если вам необходимо, чтобы строки не «схлопывались». Также, в предыдущих версиях HTML был тег nobr для таких целей. Сейчас этот тег не рекомендуется к использованию.
Свойство white-space — это шаг к семантически чистому HTML. Вы можете настроить обработку браузером пробелов, используя CSS.
Определение и возможные значения.
Свойство white-space предназначено для определения поведения браузера при обработке множественных пробелов и переводов строк. Конечно, обрабатываемая часть документа ограничивается CSS-селектором.
Ниже перечислены допустимые значения свойства с описанием каждого из них:
white-space: normal
Значение по умолчанию. Если оно установлено явно, то результатом будет обычный вывод, без использования тега pre. Как и в случае с большинством CSS-свойств, существует только одна причина использовать это значение, когда вы установили это свойство где-либо выше по иерархии свойств или элементов, для того чтобы вернуть обычное поведение элемента.
Повторяющиеся пробелы и разрывы строк игнорируются, для того чтобы наиболее естественно отобразить текст.
white-space: nowrap
Это наиболее используемое значение свойства, поскольку оно делает поведение браузера точно таким же, как и в случае со значением normal, за исключением того, что подавляются разрывы строк, даже в тех случаях когда выводимый текст получается шире чем контейнер для вывода.
Элемент, для которого значение свойства установлено как nowrap, не позволяет тексту и другим inline-элементам переносится естественным образом на новую строку. Вместо этого он продолжает вывод за своими границами, до тех пор, пока текст не закончится, оставляя его на одной линии. Это значение не оказывает никакого эффекта на повторяющиеся пробелы между словами, они по-прежнему «схлопываются» в один, как обычно.
Повторяющиеся пробелы игнорируются, переводы строк не используются, даже если текст не помещается в строке.
white-space: pre
Это значение работает именно так, как ожидается: точно также, как и содержимое тега pre. Все пробелы и переводы строк выводятся точно также как и в исходном HTML. Если какая-нибудь строка шире, чем её родитель, то она не будет разрываться, а будет выводится как одна строка.
Повторяющиеся пробелы и переводы строк выводятся так же как и в исходной разметке, естественные переводы строк не работают.
white-space: pre-line
Это свойство работает также как и normal, за исключением одного момента: переводы строк в исходной разметке являются значимыми. Таким образом, если в разметке между словами несколько пробелом, они будут проигнорированы как обычно, однако, если в разметке встречается перевод строки, при выводе, текст также будет перенесён на новую строку. Это значение не поддерживается в Internet Explorer до 7-ой версии, FireFox до 3-ей версии и Opera до версии 9.2.
Повторяющиеся пробелы игнорируются, переводы строк обрабатываюся.
white-space: pre-wrap
Это значение определяет такое же поведение как и значение pre, за тем исключением что строка переносится в соответствии с границами родительского элемента. Таким образом, текст будет переносится на новую строку, как это было бы при значении normal, а также будут считываться множественные пробелы и переводы строк исходного HTML. Это свойство не поддерживается в Internet Explorer до версии 7, а также FireFox до версии 3.
Обрабатываюся повторяющиеся пробелы и явные переводы строк, а также естественные переводы строк.
Варианты использования
Возможно, наиболее частый случай использования свойства white-space — это применение его к ссылке, которую вы не хотите переносить на новую строку.
На показанном скриншоте, ссылка «Read more »» кавычка (») перенеслась на новую строку, поскольку ей не хватило места. Этого можно избежать применив к ссылке значение nowrap. В этом случае ссылка будет перенесена на новую строку целиком, как неразрывный элемент. Обратите внимание, что свойство white-space было применено только к содержимому элемента. Поэтому ссылка и была перенесена на новую строку целиком. Текст внутри неё — неразрывен.
Заблуждения
У новичков вёрстки часто возникает недопонимание при использовании white-space: nowrap, в случае если они применяют его к inline-элементу и ожидают что он не будет переносится на новую строку. Стоит запомнить, что свойство применяется только к inline-элементам, которые находятся внутри элемента, к которому его применили, а также не оказывают никакого эффекта на блочные элементы и отступы между ними.
www.css-tricks.ru
| Справочник HTML
Элемент <pre> (от англ. «preformatted» ‒ «предварительно отформатированный») определяет блок в который помещают предварительно отформатированный текст. По умолчанию, любое количество пробелов идущих в коде подряд, на веб-странице показывается как один. Элемент <pre> позволяет обойти эту особенность, внутри этого блочного элемента сохраняются все пробелы и переносы строк, установленные автором.
По умолчанию браузеры отображают содержимое элемента <pre> с помощью моноширинных шрифтов, таких как Courier или Monaco. Это обычное дело для вывода программного кода.
Внутри тега <pre> разрешается использовать любые элементы кроме следующих: <big>, <img>, <object>, <small>, <sub> и <sup>. Также запрещено использовать любые блочные теги, так как в большинстве своем они создают дополнительные поля свободного пространства от окружающего контекста и, соответственно, изменяют расстояния между строк.
Элемент <pre> чаще всего используется в следующих случаях:
- для печати стихов, в которых взаимное расположение строк задал сам автор;
- вывод транскрипции в словарях;
- отображение ASCII рисунков;
- отображение отформатированного фрагмента программного кода какого-нибудь языка программирования.
Примечание: Если вы хотите отобразить блок исходного кода HTML документа, то используйте элемент <code>, вложенный в элемент <pre>. Это позволит поисковым роботам, социальным приложениям, RSS ридерам сразу же понять, что перед ними программный код.
Совет: Поскольку браузер использует символы < и > как начало и конец тега, применение их внутри тега <pre> может привести к проблемам. Однако вы легко можете вывести ваш HTML-код на экран воспользовавшись ссылками на символы, с помощью которых можно указать угловые скобки и любые другие спецсимволы.
Синтаксис
<pre>...</pre>Закрывающий тег
Обязателен.
Атрибуты
- widthУстарел в HTML5
- Устанавливает максимальное количество символов, отображаемых на одной строке.
Для этого элемента доступны глобальные атрибуты и события.
Стилизация по умолчанию
Большинство браузеров отобразит элемент <pre> со следующими значениями CSS по умолчанию:
pre {
display: block;
font-family: monospace;
white-space: pre;
margin: 1em 0;
}Различия между HTML 4.01 и HTML5
Атрибут width тега <pre> не поддерживается в HTML5.
Пример использования:
Заранее отформатированный текст:
Пример HTML:
Попробуй сам<p>А.С. Пушкин</p>
<pre>
Буря мглою небо кроет,
Вихри снежные крутя;
То, как зверь, она завоет,
То заплачет, как дитя,
То по кровле обветшалой
Вдруг соломой зашумит,
То, как путник запоздалый,
К нам в окошко застучит.
</pre>Спецификации
Поддержка браузерами
| Элемент | ||||||
| <pre> | 3+ | 1+ | 4+ | 1+ | 1+ | 1+ |
| Элемент | ||||
| <pre> | 1+ | 1+ | 6+ | 1+ |
Попробуйте сами — Примеры
Как сделать текст жирным и привлечь к нему внимание:
Важный и жирный текст
Как сделать акцент на фрагменте текста:
Акцент и курсив
Как отобразить текст в нижнем или верхнем индексе:
Форматирование текста
Учебник HTML
HTML уроки: HTML Форматирование
HTML Элементы
wm-school.ru
!important | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
| 6.0 | 7.0+ | 1.0+ | 3.5+ | 3.0+ | 1.0+ | 1.0+ | 1.0+ |
Краткая информация
Версии CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Описание
Играет роль в том случае, когда пользователи подключают свою собственную таблицу стилей. Если возникает противоречие, когда стиль автора страницы и пользователя для одного и того же элемента не совпадает, то !important позволяет повысить приоритет стиля.
При использовании пользовательской таблицы стилей или одновременном применении разного стиля автора и пользователя к одному и тому же селектору, браузер руководствуется следующим алгоритмом.
- !important добавлен в авторский стиль — будет применяться стиль автора.
- !important добавлен в пользовательский стиль — будет применяться стиль пользователя.
- !important нет как в авторском стиле, так и стиле пользователя — будет применяться стиль автора.
- !important содержится в авторском стиле и стиле пользователя — будет применяться стиль пользователя.
Итог от применения !important в общем случае показан в табл. 1.
| Стиль автора | Стиль пользователя | Результат |
|---|---|---|
| BODY { color: silver;
| BODY { color: #000;
| Lorem ipsum dolor sit amet… Будет применяться стиль автора, а именно: установлен серый цвет текста, размер шрифта 8 пунктов. |
| BODY { color: silver;
| BODY { color: #000 !important;
| Lorem ipsum dolor sit amet… Цвет текста будет установлен пользовательским, а размер шрифта останется исходным. В итоге увидим черный текст размером 8 пунктов. |
| BODY { color: silver;
| BODY { color: #000 !important;
| Lorem ipsum dolor sit amet… Будут использоваться все стилевые свойства пользователя. Текст станет отображаться как черный, размер 12 пунктов. |
| BODY { color: silver !important; font-size: 8pt !important } | BODY { color: #000 !important;
| Lorem ipsum dolor sit amet… При добавлении !important в ту и другую таблицу приоритет в этом случае имеет стиль пользователя. В результате текст станет черным, а размер его увеличится до 12 пунктов. |
В браузере Internet Explorer подключение стиля пользователя делается через меню , как показано на рис. 1.
Рис. 1. Подключение стиля пользователя в браузере Internet Explorer
В браузере Opera аналогичное действие происходит через команду (рис. 2).
Рис. 2. Подключение стиля пользователя в браузере Opera
Синтаксис
Свойство: значение !important
Значения
У этого свойства нет значений.
Пример
HTML5CSS2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>important</title>
<style>
p {
background: url(images/tune1.png) no-repeat !important;
min-height: 112px; /* Минимальная высота */
padding-left: 65px; /* Поле слева от текста */
}
p {
background: url(images/tune2.png) no-repeat;
}
</style>
</head>
<body>
<p>Минорная пентатоника с пониженной V ступенью также называется блюзовой
пентатоникой.</p>
</body>
</html>В данном примере для одного селектора задается одно и то же свойство с разными значениями. Но поскольку к первому селектору добавляется !important, то его стиль и будет применяться на странице.
Браузеры
При добавлении !important к значению стилевого свойства его важность повышается. Если переопределить значение того же свойства без !important, оно будет игнорироваться браузерами. Но только не в Intenet Explorer версии 6 и ниже.
htmlbook.ru