Руководство по HTML5
Адам Фриман
Разрыв строки
Есть два элемента, которые можно использовать для разрыва строк в контенте: это элементы 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
вы сообщаете браузеру, где перенос слова будет наиболее подходящим.