ru af en-us pl be tr

Категория CSS  

word-wrap CSS3


2012-11-07 12:11:51

 

 word-wrap  CSS3

 

 

Свойство word-wrap входит в модуль Text (Текст), с которым вы можете ознакомиться и 

загрузить по адресу .w3.org/TR/css3-text. Оно указывает, разрешается ли бра-

узеру разрывать строки прямо внутри слов. (Переносом строк с разрывами между слов 

управляет отдельное свойство text-wrap.) Допустимые значения свойства word-wrap: normal 

(это значение по умолчанию) и break-word.

Помимо переноса на новую строку длинных URL-адресов, свойство word-wrap удобно 

применять для решения следующих задач:

форматирование данных в таблицах, для того чтобы ячейки не растягивались в ширину 

и не искажали макет страницы (456bereastreet.com/archive/200704/

how_to_prevent_html_tables_from_becoming_too_wide);

перенос строк кода внутри элементов pre (longren.org/wrapping-text-

inside-pre-tags).

 

 

 Поддержка свойства word-wrap в браузерах

 

 Поддержка свойства word-wrap в браузерах CSS3

 

 

В файле 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). Очевидно, что перенос части слова на новую 

строку — не идеальное решение, но мне кажется, что так текст выглядит лучше, 

 

 

чем со строками, выходящими далеко за пределы отведенных для них областей. 

Кроме того, вряд ли слова будут разрываться в обычном тексте — чаще всего это 

требуется только для длинных URL-адресов.

 

 

Теперь браузер может разорвать строку между любыми символами

 

 

 

Теперь браузер может разорвать строку между любыми символами

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

вращением комментариев в настоящие облачка с текстом!




Похожие статьи

 Поддержка браузерами CSS3
 Постепенное сокращение возможностей CSS3
 Шрифт CSS
 Обтекание блока текста CSS
 


Сайт является частным собранием материалов и представляет собой любительский информационно-образовательный ресурс. Вся информация получена из открытых источников. Администрация не претендует на авторство использованных материалов. Все права принадлежат их правообладателям