Има моменти, когато наистина дълъг низ от текст може да препълни контейнера на оформление.
Например:
Ето лъжичката:
overflow-wrap: break-word;гарантира, че дългият низ ще се увие и няма да излезе от контейнера. Можете също така да използватеword-wrap, тъй като, както казва спецификацията, те са буквално просто алтернативни имена един за друг. Някои браузъри поддържат единия, а другия не. Firefox (тестван v43) поддържа самоword-wrap. Blink (тестван 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е, че се поддържа универсално.
Примери
Вижте дългите думи на Pen Hyphenate от CSS-Tricks (@ css-tricks) на CodePen.
Вижте Pen Ellipses от CSS-Tricks (@ css-tricks) на CodePen.
Вижте писалката за фигуриране на опаковане на линии от Chris Coyier (@chriscoyier) на CodePen.
Още ресурси
- Michael Scharnagl: Справяне с дълги думи в 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; )