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).
htmlCodes
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Элементы «br», «wbr» и «hr»</title> </head> <body> <p title="Часть слова перенесена на новую строку при помощи «br»"> Я – первый абзац. <br>Чтобы узнать, почему браузер перенес часть слова на новую строку, посмотри<br>те код. </p> <!--Используем «hr» для разделения абзацев--> <hr> <p title="«wbr» сработает, если ширины элемента не хватит для строки"> Я – второй абзац. Меня отделили гори<wbr>зонталь<wbr>ной лини<wbr>ей <!-- Для IE в качестве примера используем атрибут style --> от пер<wbr>вого аб<wbr style="display: inline-block">заца. </p> </body> </html>
Пример №1. Использование элементов «br», «wbr» и «hr»
При отображении примера в браузере хорошо видно, что горизонтальная линия заполняет всю доступную ширину, поскольку отображается браузером как блочный элемент.
Быстрый переход к другим страницам
- Абзац, заголовки и преформатированный текст
- Теги <br>, <wbr> и <hr>
- Элементы «span» и «div»
- Вернуться к оглавлению учебника