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

Ограничение длины строки в большом блоке текста • 53

На рис. 2.1 показан раздел комментариев со страницы блога, где используется лишь
несколько базовых стилей. Текст, аватар и имя комментатора, а также дата каждого
комментария аккуратно выводятся на своих местах, текст отформатирован, и мы
даже видим простейшие фоны и рамки полей. С этой областью комментариев
все в порядке: с ней можно работать, и смотрится она опрятно и привлекательно.
У пользователей старых браузеров не возникнет мысли о том, что на странице чего-
то не хватает или она сломана.
Однако, применив CSS3, мы может значительно усовершенствовать ее, не добав-
ляя при этом изображения и не редактируя разметку. Наша задача — заставить
оформление страницы «заиграть». Для начала загрузите файлы упражнений для
этой главы с веб-сайта http://www.stunningcss3.com и откройте в любом редакторе
кода документ speech-bubble_start.html. Для простоты редактирования CSS-код
содержится в элементе style тега head этой страницы.

ОграниЧение длины стрОки в бОльшОм блОке текста

Да, я сама только что сказала, что мы будем работать над оформлением коммента-
риев. Но прежде чем браться за облачка с текстом, давайте быстренько избавимся
от извечной и крайне раздражающей проблемы с форматированием текста, которую
можно разрешить с помощью простейшего кода CSS3.
Очень часто люди добавляют в комментарии
и публикации на форумах URL-адреса, но почти Здесь нас поджидает приятный
всегда длинные URL-адреса вылезают за пределы сюрприз: свойство word-wrap
предназначенных для них контейнеров (рис. 2.2). работает в IE, причем во мно-
Почти все современные браузеры умеют перено- жестве устаревших версий, на-
сить на новую строку адреса, содержащие дефи- чиная с 5.5. В действительности
сы (-). Однако браузеры на базе Webkit, а также автором этого свойства являются
IE не вставляют разрыв строки после косой разработчики Microsoft, и лишь
позднее его взял на вооружение
черты (/), и ни один из современных браузеров консорциум W3C.
не умеет разрывать строку рядом с символом
подчеркивания (_).

Рис. 2.2. Длинные URL-адреса зачастую вылезают за пределы контейнеров,
особенно если в тексте адреса встречаются символы подчеркивания

www.trk.kg