В hyphensуправлінні власністю Розстановка переноси тексту в елементах рівня блоку. Ви можете запобігти переносу взагалі, дозволити це або дозволити лише тоді, коли присутні певні символи.
Зверніть увагу, що hyphensчутливий до мови. Його здатність знаходити можливості розриву залежить від мови, визначеної в langатрибуті батьківського елемента. Ще не всі мови підтримуються, і підтримка залежить від конкретного браузера.
Синтаксис
p ( hyphens: none | manual | auto )дефіси: немає
Слова ніколи не переносяться під час розривів рядків, навіть якщо символи всередині слова вказують, куди перенесення може чи має йти.
дефіси: посібник
Слова розбиваються лише при розривах рядків, де всередині слова є символи, що пропонують можливості розриву рядка. Є два символи, які пропонують можливість розриву рядка:
U+2010(ЗНАК): “твердий” дефіс вказує на видиму можливість розриву рядка. Навіть якщо рядок фактично не перерваний у цей момент, дефіс все одно відображається. Буквально "-".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; )