Найти тему

Тег NOBR

В некоторых случаях необходимо, чтобы какая-то строка выводилась в браузере без разрыва, даже если она не помещается в окне целиком. Например, это может потребоваться при выводе на HTML-странице компьютерных команд, которые могут быть достаточно длинными. В таких случаях разрывать строку нежелательно, потому что восприятие разорванной команды будет хуже.

Однако браузеры автоматически выполняют перевод строк, если текст не помещается в окне по ширине. Что делать?

В стандарте HTML есть тег <pre>, который выводит текст “как есть”, то есть без принудительного переноса текста на новую строку. Это старый проверенный способ, который поддерживается почти всеми браузерами. Однако он не безупречен.

Во-первых, он отображает текст моноширинным шрифтом, который, как правило, отличается от шрифта страницы. В большинстве случаев это именно то, что нужно. Однако бывают исключения.

Во-вторых, отформатированный вручную текст внутри этого тега в некоторых случаях может выводиться не совсем так, как мы ожидаем.

Но есть хорошая замена тегу <pre>, когда надо сделать так, чтобы текст выводился в одну строку. Это тег <nobr>. Его нет в стандарте HTML, однако большинство браузеров его поддерживают.

Действие этого тега заключается в том, что браузер обращается с текстом, помещённым внутри пары тегов <nobr></nobr>, как с одним словом. Кстати, как вы поняли - это парный тег. Содержимое тега отображается текущим шрифтом и внутри тега при необходимости можно установить другой стиль.

Также браузер не прекращает обычный вывод содержимого внутри тега <nobr>. Вы можете вставлять рисунки, таблицы - что угодно. Или разорвать строку с помощью, например, <br>. Единственный эффект применения тега <nobr> состоит в подавлении автоматического перехода на новую строку при достижении текущей строкой правого края окна.

Пример:

<nobr>
Это длинная-длинная строка, которая по нашей задумке
не должна разрываться, то есть браузер не должен
автоматически переводить строку, если она не
помещается в окно по ширине.
</nobr>

Ну а на рисунках ниже показано, как этот текст выглядел бы без использования тега <nobr>, и как с тегом <nobr>.

Как выглядит текст в обычном режиме
Как выглядит текст в обычном режиме
Как выглядит текст при использовании тега <nobr>
Как выглядит текст при использовании тега <nobr>

На этом всё. Подписывайтесь на канал, чтобы ничего не пропустить.