Бувають випадки, коли дійсно довгий рядок тексту може переповнювати контейнер макета.
Наприклад:
Ось совок:
overflow-wrap: break-word;переконуєсь, що довга струна загортається і не виривається з контейнера. Ви також можете використовуватиword-wrap, оскільки, як сказано в специфікації, це буквально просто альтернативні імена один для одного. Деякі браузери підтримують один, а інший - не. Firefox (випробуваний v43) підтримує лишеword-wrap. Блимання (перевірений Chrome v45) займе будь-який з них.- Оскільки
overflow-wrapуживаються самі собою, слова розбиватимуться де завгодно, де їм потрібно. Якщо є символ "прийнятного розриву" (наприклад, буквальний тире, наприклад), він там порушиться, інакше він просто робить те, що йому потрібно зробити. - Ви також можете скористатися ним
hyphens, оскільки тоді він спробує зі смаком додати дефіс, де він ламається, якщо браузер це підтримує (Blink не під час написання, Firefox це робить). word-break: break-all;полягає в тому, щоб сказати браузеру, що це нормально, якщо порушувати слово там, де це потрібно. Незважаючи на те, що це в будь-якому випадку це робить, тому я не впевнений, у яких випадках це потрібно на 100%.
Якщо ви хочете бути більш ручним з дефісами, ви можете запропонувати їх у своїй розмітці. Докладніше на сторінці MDN.
Підтримка браузера
Для word-break:
Дані про підтримку веб-переглядача подані компанією Caniuse, яка містить більше деталей. Цифра вказує на те, що браузер підтримує цю функцію на цій версії та вище.
Робочий стіл
| Chrome | Firefox | IE | Край | Сафарі |
|---|---|---|---|---|
| 44 | 15 | 5.5 | 12 | 9 |
Мобільний / планшетний
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 9,0-9,2 |
Для hypens:
Дані про підтримку веб-переглядача подані компанією Caniuse, яка містить більше деталей. Цифра вказує на те, що браузер підтримує цю функцію на цій версії та вище.
Робочий стіл
| Chrome | Firefox | IE | Край | Сафарі |
|---|---|---|---|---|
| 88 | 6 * | 10 * | 12 * | 5,1 * |
Мобільний / планшетний
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 4,2-4,3 * |
Для overflow-wrap:
Дані про підтримку веб-переглядача подані компанією Caniuse, яка містить більше деталей. Цифра вказує на те, що браузер підтримує цю функцію на цій версії та вище.
Робочий стіл
| Chrome | Firefox | IE | Край | Сафарі |
|---|---|---|---|---|
| 23 | 49 | 11 | 18 | 6.1 |
Мобільний / планшетний
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4.4 | 7,0-7,1 |
Для text-overflow:
Дані про підтримку веб-переглядача подані компанією Caniuse, яка містить більше деталей. Цифра вказує на те, що браузер підтримує цю функцію на цій версії та вище.
Робочий стіл
| Chrome | Firefox | IE | Край | Сафарі |
|---|---|---|---|---|
| 4 | 7 | 6 | 12 | 3.1 |
Мобільний / планшетний
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 2.1 | 3.2 |
Запобігання переповненню еліпсисом
Інший підхід, який слід розглянути, - це усічення тексту і додавання еліпсів там, де рядок тексту потрапляє в контейнер:
.ellipses ( overflow: hidden; white-space: nowrap; text-overflow: ellipsis; )Приємна річ використання text-overflowполягає в тому, що воно підтримується універсально.
Приклади
Дивіться «Довгі слова пера-пера» від CSS-Tricks (@ css-tricks) на CodePen.
Дивіться Pen Ellipses від CSS-Tricks (@ css-tricks) на CodePen.
Дивіться ручку, що розгадує обгортку ліній Кріса Койєра (@chriscoyier) на CodePen.
Більше ресурсів
- Майкл Шарнагал: Робота з довгими словами в CSS
- Кеннет Аухенберг: Перенесення слів / перенос слів за допомогою CSS
- MDN: перенесення слів, розрив слів, дефіси
- Специфікація: CSS Текстовий рівень 3
Для SCSS-схильних
Це, як правило, такі речі, які ви посипаєте в код, де це потрібно, тому вони роблять приємні @mixins:
@mixin word-wrap() ( overflow-wrap: break-word; word-wrap: break-word; -ms-word-break: break-all; word-break: break-all; word-break: break-word; -ms-hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; )@mixin ellipsis() ( overflow: hidden; white-space: nowrap; text-overflow: ellipsis; )