HTML тег <nobr>
Тег <nobr> нестандартен и никогда не входил в HTML. Изучите современную замену CSS — white-space: nowrap — с примерами.
Тег <nobr> был предназначен для предотвращения переноса текста на несколько строк — он удерживал содержимое на одной строке. Обычно, когда строка текста длиннее своего контейнера, браузер переносит её на следующую строку. <nobr> подавлял этот автоматический перенос строки, поэтому при слишком длинной строке появлялась горизонтальная полоса прокрутки.
Никогда не используйте <nobr> в новом коде. Этот тег никогда не являлся частью какого-либо стандарта HTML — ни HTML 4, ни HTML5, ни текущей спецификации WHATWG HTML. Он всегда был нестандартным расширением браузера. Браузеры могут по-прежнему отображать его для обратной совместимости, но в любой момент могут прекратить поддержку, и он не пройдёт валидацию. Вместо этого управляйте переносом строк с помощью CSS-свойства white-space.
На этой странице показан правильный, стандартный способ предотвратить перенос текста, а затем описан устаревший тег <nobr>, чтобы вы могли распознать и удалить его из старой разметки.
Современная замена: white-space: nowrap
Чтобы удержать текст на одной строке, установите CSS-свойство white-space в значение nowrap для элемента. Это прямой стандартный аналог <nobr>, который работает в каждом современном браузере.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.no-wrap {
white-space: nowrap;
}
</style>
</head>
<body>
<h1>Example of white-space: nowrap</h1>
<p class="no-wrap">
It is an ordinary and very long text that is inconvenient to read, because it is written on one line and you have to scroll horizontally to read it.
</p>
</body>
</html>Как white-space управляет переносом строк
Свойство white-space определяет, как браузер обрабатывает пробельные символы и переносы строк внутри элемента. Основные значения:
normal— значение по умолчанию. Последовательности пробельных символов сворачиваются в один пробел, а строки переносятся по мере необходимости для заполнения контейнера.nowrap— сворачивает пробельные символы, какnormal, но текст никогда не переносится. Строка продолжается до тех пор, пока не встретится тег<br>. Это замена<nobr>.pre— пробельные символы и переносы строк сохраняются точно так, как записано в исходном коде. Текст не переносится (аналогично элементу<pre>).pre-wrap— сохраняет пробельные символы и переносы строк исходного кода, и переносит текст при переполнении контейнера.pre-line— сохраняет переносы строк исходного кода, но сворачивает другие пробельные символы, и переносит строки по мере необходимости.
Предотвращение горизонтального переполнения
Строка без переноса может выходить за край контейнера. Чтобы страница выглядела аккуратно, добавьте контейнеру полосу прокрутки с помощью свойства overflow, а не позволяйте строке выступать за пределы остальной части страницы:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.scroll-box {
white-space: nowrap;
overflow: auto; /* scrollbar appears only when needed */
width: 300px;
border: 1px solid #ccc;
padding: 8px;
}
</style>
</head>
<body>
<p class="scroll-box">
This long line stays on a single row, and the box scrolls horizontally instead of overflowing the page.
</p>
</body>
</html>Когда удерживать текст на одной строке — и когда не стоит
white-space: nowrap — правильный выбор, когда перенос нарушает смысл или вёрстку короткого, неделимого содержимого:
- Ячейки таблиц, в которых нельзя разрывать значение на строки (даты, цены, номера телефонов).
- Подписи кнопок и бейджей, чтобы короткая подпись оставалась на одной строке.
- Пункты навигационного меню, чтобы каждая ссылка оставалась целостной.
- Номера телефонов, коды или имена, которые нужно сохранить визуально вместе.
Для длинного основного текста это неправильный инструмент. Принудительное размещение абзацев на одной строке создаёт горизонтальную прокрутку, что неудобно для чтения. Для длинного содержимого, которое должно помещаться в контейнер, сделайте обратное — разрешите перенос:
overflow-wrap: break-wordпозволяет браузеру разрывать длинное слово, которое иначе нельзя перенести (например, URL), только когда оно выходит за пределы контейнера.word-breakуправляет тем, как переносятся слова, включая перенос между любыми двумя символами для CJK или очень узких колонок.
Чтобы предложить необязательную точку переноса внутри длинной строки (например, URL) без принудительного переноса, используйте HTML-элемент <wbr>.
Устаревший тег <nobr>
Тег <nobr> был парным элементом: содержимое располагалось между открывающим тегом <nobr> и закрывающим тегом </nobr>. Здесь он приводится исключительно для справки — не используйте его в новом коде.
Обычный и очень длинный текст на одной строке — устаревший пример с <nobr>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<!-- Non-standard. Use white-space: nowrap instead. -->
<nobr>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</nobr>
</body>
</html>Результат
Поскольку <nobr> является нестандартным, нет смысла стилизовать или обращаться к нему через глобальные атрибуты id/class — замените элемент стандартным (например, <span> или <p>) с white-space: nowrap и примените атрибуты к нему.