html.okpython.net
HTML и CSS для начинающих

HTML :: Теги <br>, <wbr> и <hr>

Принудительный перенос строки и тег <br>

Иногда при выводе текста на экран возникает необходимость перевода текста на новую строку в строго определенном месте. Для этого в HTML применяется одиночный тег <br> (от англ. breakперенос строки), который формирует пустой элемент разметки и переводит текст на новую строку именно в том месте, в котором он находится. При этом элемент «br» сохраняет расстояние между строками и не добавляет дополнительного вертикального отступа, как в случае с блочными элементами (см. пример №1). Браузеры, кстати, считают его строчным элементом.

Мягкий перенос строки и тег <wbr>

В отличие от элемента «br», мягкий перенос строки «wbr», формирующийся одиночным тегом <wbr> (от англ. word break opportunityудобный случай для переноса слова), осуществляет разрыв строки только тогда, когда этого требует ширина родительского элемента. В противном случае перенос строки не происходит. Таким образом, элемент «br» указывает браузеру, где делать перенос, а элемент «wbr» – где допускается делать перенос.

В IE элемент «wbr» срабатывает только, если в стилях «CSS», применяемых к тегам <wbr>, указано свойство "display: inline-block".

Горизонтальная линия и тег <hr>

Для визуального и логического отделения одних блоков текста от других, например, абзацев, можно воспользоваться элементом «hr». Он формируется одиночным тегом <hr> (от англ. horizontal ruleгоризонтальная линейка) и рисует обычную горизонтальную линию. Элемент является пустым, но браузерами отображается как блочный элемент. Поэтому содержимое, которое следует после элемента, переносится на новую строку (см. пример №1).

HTML Результат htmlCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Элементы «br», «wbr» и «hr»</title>
</head>
<body>
	<p title="Часть слова перенесена на новую строку при помощи «br»">
		Я &ndash; первый абзац. <br>Чтобы узнать, почему браузер перенес часть 
		слова на новую строку, посмотри<br>те код.
	</p>
	
	<!--Используем «hr» для разделения абзацев-->
	<hr>
	
	<p title="«wbr» сработает, если ширины элемента не хватит для строки">
		Я &ndash; второй абзац. Меня отделили гори<wbr>зонталь<wbr>ной лини<wbr>ей 
		<!-- Для IE в качестве примера используем атрибут style -->
		от пер<wbr>вого аб<wbr style="display: inline-block">заца. 
	</p>
</body>
</html>

Пример №1. Использование элементов «br», «wbr» и «hr»

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

Быстрый переход к другим страницам