Главная страница   /   8.3. Разрыв строки (Руководство по HTML5

Руководство по HTML5

Руководство по HTML5

Адам Фриман

8.3. Разрыв строки

Есть два элемента, которые можно использовать для разрыва строк в контенте: это элементы br и wbr.

Принудительный разрыв строки

Элемент br устанавливает разрыв строки. Соглашение по стилям для данного элемента заключается в переходе последующего содержания на новую строку. В таблице 8-13 представлен элемент br.

Таблица 8-13: Элемент br
Элемент br
Тип элемента Фразовый
Разрешенные родительские элементы Любой элемент, который может содержать фразовый контент
Локальные атрибуты Нет
Содержание N/A
Стиль тегов Тег пустого элемента
Новый в HTML5 Нет
Изменения в HTML5 Нет
Соглашение по стилям Показать последующее содержание на новой строке (невозможно через CSS)

В листинге 8-12 показано использование элемента br.

Примечание

Элемент br может быть использован только тогда, когда разрывы строк являются частью контента, как показано в листинге 8-12. Вы не должны использовать элемент br, чтобы создать параграфы или другие группы контента; для этой задачи есть существуют другие элементы, которые я описываю в главах 9 и 10.

Листинг 8-12: Использование элемента br
<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
	<meta name="author" content="Adam Freeman" />
	<meta name="description" content="A simple example" />
	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
	I WANDERED lonely as a cloud<br />
	That floats on high o'er vales and hills,<br />
	When all at once I saw a crowd,<br>
	A host, of golden daffodils;
</body>
</html>

На рисунке 8-10 показано, как браузер отображает контент, если используется элемент br.

Рисунок 8-10: Использование элемента br

Указание возможности для безопасного разрыва строки

Элемент wbr является новым в HTML5, и он указывает, где браузер мог бы разумно вставить разрыв строки, если контент больше, чем текущее окно браузера. Браузер сам принимает решение относительно того, актуален ли на данный момент разрыв строки. Элемент wbr просто показывает подходящие места, где можно сделать разрыв строки. В таблице 8-14 представлен элемент wbr.

Таблица 8-14: Элемент wbr
Элемент wbr
Тип элемента Фразовый
Разрешенные родительские элементы Любой элемент, который может содержать фразовый контент
Локальные атрибуты Нет
Содержание N/A
Стиль тегов Тег пустого элемента (не требует закрывающего тега)
Новый в HTML5 Да
Изменения в HTML5 N/A
Соглашение по стилям Показать последующее содержание на новой строке, если требуется перенос содержания

В листинге 8-13 показано использование элемента wbr для того, чтобы помочь браузеру отобразить длинное слово.

Листинг 8-13: Использование элемента wbr
<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
	<meta name="author" content="Adam Freeman"/>
	<meta name="description" content="A simple example"/>
	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
	This is a very long word: Super<wbr>califragilistic<wbr>expialidocious.
	We can help the browser display long words with the <code>wbr</code> element.
</body>
</html>

Чтобы понять значение элемента wbr, нужно посмотреть, как браузер работает, если этот элемент используется, и как браузер ведет себя, если этот элемент не используется. На рисунке 8-11 показано, как браузер обрабатывает содержание, если элемента wbr нет.

Рисунок 8-11: Обработка контента без использования элемента wbr

Без элемента wbr браузер сталкивается с длинным словом и рассматривает его как единое целое. Это означает, что вы в конечном итоге получите большое количество пустого места в конце первой строки текста. Если вы добавите элемент wbr, как показано в листинге 8-13, то вы дадите браузеру больше возможностей, как видно на рисунке 8-12.

Рисунок 8-12: Обработка контента с использованием элемента wbr

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