Page 54 - Сила CSS3 Освой новейший стандарт

54 • Глава 2. Облачка с текстом

В CSS3 наконец-то появился простой способ приказать браузеру разрывать длинные
строки текста, причем прямо внутри слов. Для этого всего лишь нужно присвоить
свойству word-wrap значение break-word, и браузер сам будет вставлять разрыв
в подходящем месте строки, не давая ей вылезти за пределы контейнера.

коротко о СвойСтве word-wrap

Свойство word-wrap входит в модуль Text (Текст), с которым вы можете ознакомиться и
загрузить по адресу http://www.w3.org/TR/css3-text. Оно указывает, разрешается ли бра-
узеру разрывать строки прямо внутри слов. (Переносом строк с разрывами между слов
управляет отдельное свойство text-wrap.) Допустимые значения свойства word-wrap: normal
(это значение по умолчанию) и break-word.
Помимо переноса на новую строку длинных URL-адресов, свойство word-wrap удобно
применять для решения следующих задач:
• форматирование данных в таблицах, для того чтобы ячейки не растягивались в ширину
и не искажали макет страницы (см. http://www.456bereastreet.com/archive/200704/
how_to_prevent_html_tables_from_becoming_too_wide);
• перенос строк кода внутри элементов pre (см. http://www.longren.org/wrapping-text-
inside-pre-tags).

Таблица 2.1. Поддержка свойства word-wrap в браузерах
IE Firefox Opera Safari Chrome

Да, начиная Да, начиная Да Да Да
с версии 5.5 с версии 3.5

В файле speech-bubble_start.html, в коде CSS внутри тега head найдите правило
blockquote и добавьте свойство word-wrap:

blockquote {
margin: 0 0 0 112px;
padding: 10px 15px 5px 15px;
border-top: 1px solid #fff;
background-color: #A6DADC;
word-wrap: break-word;
}
Сохраните страницу и проверьте результат в очень узком окне браузера. О, так на-
много лучше. Браузер все так же переносит строки в обычных точках разрыва, но
если возникает необходимость, он добавляет разрывы рядом с символами подчер-
кивания и даже внутри слов (рис. 2.3). Очевидно, что перенос части слова на новую
строку — не идеальное решение, но мне кажется, что так текст выглядит лучше,

www.trk.kg