HTML тег
Тег сообщает браузеру, что текст на нем должен отображаться в строке без передачи. По мере того как весь текст отображается строкой, появляется горизонтальная полоса прокрутки.
Тег нестандартный и не входит в спецификацию HTML․ Вместо него рекомендуется использовать CSS свойство white-space .
Синтаксис
Тег
Пример
html> html> head> title>Заголовок окна веб-страницы title> head> body> nobr> Это обычный и очень длинный текст, который весьма неудобно читать, так как он написан в одну строчку, и вы вынуждены прокручивать по горизонтали, чтобы прочитать его. nobr> body> html>Результат
Рассмотрим пример с использованием CSS свойства white-space вместо элемента .
Пример
html> html> head> title>Заголовок окна веб-страницы title> style> p.a < white-space: nowrap; > style> head> body> h1>Пример использования CSS свойства white-space h1> p class="a"> Это обычный и очень длинный текст, который весьма неудобно читать, так как он написан в одну строчку, и вы вынуждены прокручивать по горизонтали, чтобы прочитать его. p> body> html>Результат
Атрибуты
Как добавить стиль к тегу ?
Распространенные свойства для изменения визуальной насыщенности/выделения/размера текста внутри тега :
- CSS свойство font-style задает стиль шрифта: normal | italic | oblique | initial | inherit
- CSS свойство font-family создает приоритетный список названий семейства шрифтов и/или общее имя шрифтов для выбранных элементов.
- CSS свойство font-size задает размер щрифта.
- CSS свойство font-weight устанавливает насыщенность шрифта.
- CSS свойство text-transform задает регистр текста (заглавные или строчные буквы).
- CSS свойство text-decoration устанавливает оформление текста. Оно является сокращенным свойством для text-decoration-line, text-decoration-color, text-decoration-style.
Цвет текста внутри тега :
- CSS свойство color определяет цвет контента и оформления текста.
- CSS свойство background-color устанавливает фоновый цвет элемента.
Стили форматирования текста для тега :
- CSS свойство text-indent указывает размер отступа первой строки в текстовом блоке.
- CSS свойство text-overflow указывает, как будет отображаться пользователю строчный текст, выходящий за границы блока.
- CSS свойство white-space указывает, как будут отображены пробелы внутри элемента.
- CSS свойство word-break указывает перенос строки.
Другие свойства для тега :
- CSS свойство text-shadow добавляет тень к тексту.
- CSS свойство text-align-last выравнивает последнюю строку текста.
- CSS свойство line-height устанавливает межстрочный интервал.
- CSS свойство letter-spacing устанавливает расстояние между буквами/символами в тексте.
- CSS свойство word-spacing устанавливает расстояние между словами в тексте.
Что такое nobr в HTML5?
При использовании HTML тега
Атрибуты:
- У этого тега нет специальных атрибутов, но вы можете использовать все универсальные теги, такие как title.
Пример:
Обычный текст, который будет разделен на несколько линий, так как здесь не было использовано тега nobr. Обычный текст в общем.
Обычный текст, который будет не разделен на несколько линий, так как здесь был использован тега nobr. Достаточно полезное свойство честно говоря!
#fullWidth>p:last-of-type
Результат:
Обычный текст, который будет разделен на несколько линий, так как здесь не было использовано тега nobr. Обычный текст в общем.
Элемент nobr
Элемент nobr (от англ. » no br eak» ‒ «без разрыва») выводит вложенный в него текст на одну строку. Текст по достижении допустимой границы одного из элементов верхнего уровня не переводится автоматически (как это обычно делается web-браузером) на новую строку, а продолжает выводиться на одной строке расширяя тем самым допустимую границу. В этом случае появляется горизонтальный «scroll bar» и что бы увидеть весь текст приходиться прокручивать страницу в горизонтальном направлении.
Примечание
В данном случае текст перевести все же можно, но только делать это придётся вручную (например, с помощью элемента br ).
Nobr что это
Элемент (от англ. no line break — нет переноса строки) уведомляет браузер отображать текст без переносов. Без него текст выравнивается по левому краю окна браузера или родительского элемента. При этом браузер переводы строк расставляет автоматически, чтобы текст полностью поместился по ширине окна. Использование заставляет отображать текст без переносов, одной строкой, что может привести к появлению горизонтальной полосы прокрутки. Пользователям придется прокручивать текст по горизонтали, чтобы увидеть его полностью.
Это нестандартный элемент, взамен него используйте стили.
Синтаксис
Текст Атрибуты
Пример
Результат данного примера показан ниже.
Рис. 1. Текст без переносов
Примечание
Для запрета переноса строк в тексте используйте свойство white-space со значением nowrap .
Браузеры
| 3 | 12 | 1 | 4 | 1 | 1 |
| 4.4 | 1 | 6 | 1 |
Браузеры
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.