(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
Microsoft Office для дома и учебы 2019 (лицензия ESD)
Raize Components 6
erwin Data Modeler Workgroup Edition r9.7 - Product plus 1 Year Enterprise Maintenance Commercial
VMware Workstation Pro 12 for Linux and Windows, ESD
The BAT! Professional - 1 компьютер
 
Другие предложения...
 
Курсы обучения   WWW.ITSHOP.RU
 
Другие предложения...
 
Магазин сертификационных экзаменов   WWW.ITSHOP.RU
 
Другие предложения...
 
3D Принтеры | 3D Печать   WWW.ITSHOP.RU
 
Другие предложения...
 
Новости по теме
 
Рассылки Subscribe.ru
Информационные технологии: CASE, RAD, ERP, OLAP
Безопасность компьютерных сетей и защита информации
Новости ITShop.ru - ПО, книги, документация, курсы обучения
OS Linux для начинающих. Новости + статьи + обзоры + ссылки
eManual - электронные книги и техническая документация
Один день системного администратора
Каждый день новые драйверы для вашего компьютера!
 
Статьи по теме
 
Новинки каталога Download
 
Исходники
 
Документация
 
Обсуждения в форумах
Рабочее зеркало БК Мостбет - как найти? (2)
Узнайте обо всех особенностях по поиску рабочего зеркала БК Мостбет из нашей статьи...
 
Realme Narzo 50A (1)
Посмотрела вчера характеристики нового смартфона Realme Narzo 50A...
 
Онлайн покер (6)
Подскажите, пожалуйста, где можно научиться играть в покер в интернете и зарабатывать на этом?
 
Можно ли зарабатывать в интернете играя в казино ? (4)
Можно ли зарабатывать в интернете играя в казино ?
 
Рейтинг лучших букмекерских контор в России (3)
Рейтинг букмекеров и топ-10 лучших https://superbet.guru/bookmakers-rating/ в 2020-2021 году....
 
 
 



    
rambler's top100 Rambler's Top100