(495) 925-0049, ITShop интернет-магазин 229-0436, Учебный Центр 925-0049
  Главная страница Карта сайта Контакты
Поиск
Вход
Регистрация
Рассылки сайта
 
 
 
 
 

Дефисные переносы при помощи CSS3

Источник: coolwebmasters

Дефисы обычно необходимы, когда ширина страницы или колонки настолько маленькая, что в нее не вмещается строка. Они позволяют равномерно распределять абзацы текста, а также помогают избежать преломления текста.

Для сравнения давайте взглянем на нижеприведенный скриншот. Обратите внимание на расстояние между словами.

Дефисные переносы при помощи CSS3

У нас уже давно есть возможность переносить текст в печатных медиа-ресурсах, а вот что касается веб-сайтов, то такая возможность только появилась с введением нового CSS3-свойства под названием hyphens. И здесь, опять же, следует обращать внимание на браузерную поддержку.

На момент написания данной статьи, данное новое свойство, hyphens, поддерживалось только в Internet Explorer 10, Firefox 6+, Safari 5.1+ с приставкой; на удивление, свойство пока еще не поддерживается в Chrome.

Посмотреть демо

Применение

Свойство 'hyphens' принимает два значения: 'auto' и 'manual'. Значение 'auto' позволяет браузерам переносить текст в абзацах автоматически, когда это возможно.

p { text-align: justify; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; }
Этот код дает нам следующий результат.

Дефисные переносы при помощи CSS3

В то время, как использование значения 'manual' подразумевает ручное указание того, как слово должно быть перенесено, при помощи­, вставленного прямо в слово.

HTML-код

<p>Lorem ipsum dolor sit amet, consect­etur adipisic­ing elit, sed do eius­mod tempor incididunt ut labore et dolore magna ali­qua [...]</p>
CSS-код

p { text-align: justify; -webkit-hyphens: manual; -moz-hyphens: manual; hyphens: manual; }
В зависимости от длины абзаца, результат может отличаться.

Дефисные переносы при помощи CSS3

В завершение

Если бы данное свойство поддерживалось во всех браузерах, мы уверены, что тексты на сайтах выглядели бы гораздо приятнее. До того момента у нас в качестве альтернативы есть возможность использовать отличную javascript-библиотеку под названием Hyphenator - она лучше поддерживается в браузерах, и при этом работает на многих языках.

Скачать исходный код

Ссылки по теме


 Распечатать »
 Правила публикации »
  Написать редактору 
 Рекомендовать » Дата публикации: 25.06.2013 
 

Магазин программного обеспечения   WWW.ITSHOP.RU
Quest Software. TOAD Xpert Edition
ARCHICAD 21, локальная лицензия на 12 месяцев
WinRAR 5.x 1 лицензия
Quest Software. Toad for SQL Server Development Suite
dbForge Studio for MySQL Professional license
 
Другие предложения...
 
Курсы обучения   WWW.ITSHOP.RU
 
Другие предложения...
 
Магазин сертификационных экзаменов   WWW.ITSHOP.RU
 
Другие предложения...
 
3D Принтеры | 3D Печать   WWW.ITSHOP.RU
 
Другие предложения...
 
Новости по теме
 
Рассылки Subscribe.ru
Информационные технологии: CASE, RAD, ERP, OLAP
Безопасность компьютерных сетей и защита информации
Новости ITShop.ru - ПО, книги, документация, курсы обучения
OS Linux для начинающих. Новости + статьи + обзоры + ссылки
eManual - электронные книги и техническая документация
Один день системного администратора
Проект mic-hard - все об XP - новости, статьи, советы
 
Статьи по теме
 
Новинки каталога Download
 
Исходники
 
Документация
 
Обсуждения в форумах
Отличается ли ДрифтКазино от беттинга? (23)
Друзья, давно заметил, что на Дрифте уже несколько месяцев во всю рекламируется и предлагается...
 
Особенности покупки программного обеспечения - легальный софт vs. кряки/crack, keygen и пр. (4)
А Linux не пробовали? Там ЛЮБОГО добра хватает :) Без всяких кряков, кейгенов и т.д. При этом...
 
Создавая свой веб-сайт, не превращайте его в призрака (3)
Если автор имел что сказать, то почему он этого не сказал. Если не имел, то с какой целью он...
 
Игровые автоматы на настоящие деньги (3)
Только играя в интернет-заведении с лицензией...
 
Детейлинг центр (1)
Ездили в отпуск в Москву, сломалась выхлопная система - отремонтировали здесь:...
 
 
 



    
rambler's top100 Rambler's Top100