Описание html-тегов br, wbr и hr
http://belarusweb.net
Основы создания сайтов

2.3. Теги <br>, <wbr> и <hr>

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

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

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

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

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

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

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

<!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>

Пример 2.4. Использование элементов 'br', 'wbr' и 'hr'

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