belarusweb.net
© Петр Романовский Минск, 2016-2017.



belarusweb.net

Основы создания сайтов...

HTML >>>

2.3. Вспомогательные элементы: принудительный перенос строки,
мягкий перенос строки и горизонтальная линия. Теги <br>, <wbr> и <hr>

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

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

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

Для визуального и логического отделения одних блоков текста от других, например, абзацев, можно воспользоваться элементом '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'

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

Контрольные вопросы и задания

  1. В чем отличие элемента 'br' от 'wbr'?
  2. Каким тегом формируется горизонтальная линия?

Словарь новых английских слов

word [wə:d] – слово.
break [breɪk] – разрыв, прекратить.
opportunity [,ɔpə'tju:niti] – возможность,
удобный случай.
division [di'viʒən] – раздел, разделение.
bold [bəuld] – жирный.
italic [i'tælik] – курсив, наклонный.
underline [ˌʌndəˈlaɪn] – подчеркнуть.
strike out [strʌɪk ˈaut] – вычеркивать.
subscript [ˈsʌbskrɪpt] – нижний индекс.
superscript [ˈsuːpəskrɪpt] – верхний индекс.
emphasis [ˈɛmfəsɪs] – акцент, выделение.
strong [strɔɳ] – сильный, прочный.
variable ['vɛəriəbl] – переменная.
sample ['sa:mpl] – образец.
definition [defi'ni∫ən] – определение.
quote [kwəut] – цитата.
insert [ɪnˈsɜːt] – вставлять.
reversed [rɪˈvɜːst] – перевернутый, обратный.
ordered [ˈɔːdəd] – упорядоченный, нумерованный (список).
unordered [ʌnˈɔːdəd] – маркированный (список).
description [dis'krip∫ən] – описание.
row [rou] – строка, ряд.
column ['kɔləm] – столбец, колонка.
cell [cel] – ячейка, элемент, клетка.
table ['teibl] – таблица, стол.
row span – диапазон строк.
column span – диапазон столбцов.
self [self] – сам.
parent ['pɛərənt] – родитель.
blank [blæɳk] – чистый, пустой, бланк.
anchor ['æɳkə] – якорь, привязка.
link [link] – связь, ссылка.
foot [fut] – нижнее поле, ступня.
header ['hedə] – заголовок, верхний колонтитул.

Комментарии (0)
Петр Романовский
1. Приветствуются комментарии, которые содержат дополнения к материалу текущей страницы, а также ваши ответы на вопросы других пользователей.
2. Если вам что-то непонятно - спрашивайте, не забывая написать, что именно и с какого места.
Показаны все комментарии
Чтобы оставить свой комментарий, авторизуйтесь, пожалуйста!    
     
belarusweb.net © Петр Романовский, Минск, 2016-2017.
Связаться с автором
Наверх