(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
Kaspersky Internet Security для всех устройств. 3-Device 1 year Base Download Pack
Business Studio 4.2 Professional. Персональная лицензия. Лицензия на 1 месяц.
ZBrush 4R6 Win Commercial Single License ESD
CAD Import .NET Professional пользовательская
Stimulsoft Reports Server Team 10 users
 
Другие предложения...
 
Курсы обучения   WWW.ITSHOP.RU
 
Другие предложения...
 
Магазин сертификационных экзаменов   WWW.ITSHOP.RU
 
Другие предложения...
 
3D Принтеры | 3D Печать   WWW.ITSHOP.RU
 
Другие предложения...
 
Новости по теме
 
Рассылки Subscribe.ru
Информационные технологии: CASE, RAD, ERP, OLAP
Безопасность компьютерных сетей и защита информации
Новости ITShop.ru - ПО, книги, документация, курсы обучения
OS Linux для начинающих. Новости + статьи + обзоры + ссылки
eManual - электронные книги и техническая документация
Один день системного администратора
Работа в Windows и новости компании Microsoft
 
Статьи по теме
 
Новинки каталога Download
 
Исходники
 
Документация
 
Обсуждения в форумах
Как выводить деньги в лучших казино? (6)
Порой игрок казино из рейтинга 2021 https://casino2021.net/ все сделал точно, заявка на вывод...
 
Отличается ли ДрифтКазино от беттинга? (31)
Друзья, давно заметил, что на Дрифте уже несколько месяцев во всю рекламируется и предлагается...
 
Автомобиль (5)
Доброй ночи. Планируем приобрести авто, рассматриваем б.у варианты, как проще всего подобрать...
 
Помощь по MS Access (341)
Доброе время суток. Случайно оказался на этом сайте, искал статьи по OLAP. Вижу, что...
 
Актуальное зеркало БК Марафон на сегодня (1)
На основном сайте БК Марафон https://rabochee-zerkalo-marafon.ru/ зеркало доступно прямо в...
 
 
 



    
rambler's top100 Rambler's Top100