На hyphensконтролите собственост пренасяне на текст в елементи на ниво блок. Можете да предотвратите изобщо пренасяне на тире, да го разрешите или да го разрешите само когато присъстват определени символи.
Имайте предвид, че hyphensе чувствителен към езика. Способността му да намира възможности за пробив зависи от езика, дефиниран в langатрибута на родителски елемент. Все още не се поддържат всички езици и поддръжката зависи от конкретния браузър.
Синтаксис
p ( hyphens: none | manual | auto )тирета: няма
Думите никога не се тирерат при прекъсване на редове, дори ако символите в думата подсказват къде може или трябва да отиде тирето.
тирета: ръководство
Думите се разбиват само при прекъсвания на редове, където вътре в думата има символи, които предлагат възможности за прекъсване на редове. Има два знака, които предлагат възможност за прекъсване на реда:
U+2010(HYPHEN): „твърдият“ дефис показва видима възможност за прекъсване на редове. Дори ако линията всъщност не е прекъсната в този момент, тирето пак се изобразява. Буквално „-“.U+00AD(Срамежлив): невидим, „мек“ тире. Този знак не се визуализира видимо; вместо това предлага място, където браузърът може да реши да прекъсне думата, ако е необходимо. В HTML можете да използвате-за вмъкване на меко тире.
тирета: авто
Думите могат да се разбиват в подходящи точки за пренасяне, както е определено от знаци за пренасяне (вижте по-горе) вътре в думата, или както се определя автоматично от подходящ за езика ресурс за пренасяне (ако се поддържа от браузъра или се предоставя чрез @hyphenation-resource).
Условните символи за пренасяне в думата, ако има такива, имат приоритет пред автоматичните ресурси при определяне на точки за пренасяне в думата.
тирета: всички
Оттеглено, не използвайте . Това беше само в спецификацията временно за тестване.
Демонстрация
Демото по-долу има куп параграфи и всичко е настроено hyphens: auto;да демонстрира концепцията за тире. В langатрибут е настроен на enпо майка елемент.
Поддръжка на браузър
Тези данни за поддръжка на браузъра са от Caniuse, който има повече подробности. Число показва, че браузърът поддържа функцията на тази версия и по-нова.
работен плот
| Chrome | Firefox | IE | Ръб, край | Сафари |
|---|---|---|---|---|
| 88 | 6 * | 10 * | 12* | 5.1 * |
Мобилен / таблет
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 4.2-4.3 * |
Safari 5+ изисква -webkit-, Firefox 6+ изисква -moz-, IE 10+ изисква -ms-, iOS 4.2+ изисква -webkit-.
Chrome <55 и Android браузърът всъщност поддържат -webkit-hyphens: none, което е стойността по подразбиране, но нито една от останалите стойности.
Във Firefox и Internet Explorer автоматичното пренасяне на тире работи само за някои езици (дефинирани с langатрибута). Вижте тази бележка за изчерпателен списък на поддържаните езици.
Ако пишете уеб-базиран документ, който наистина се нуждае от тире, можете да използвате Hyphenator.js, която е библиотека, базирана на обширен речник, който автоматично ще инжектира меки тирета и интервали с нулева ширина във вашето съдържание.
Без JavaScript ще трябва да разчитате и на двете, hyphensи word-wrap:
.hyphenate ( word-wrap: break-word; overflow-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; )