Są chwile, kiedy naprawdę długi ciąg tekstu może przepełnić kontener układu.
Na przykład:
Oto miarka:
overflow-wrap: break-word;dba o to, aby długi sznurek owinął się i nie wypadł z pojemnika. Równie dobrze możesz ich użyć,word-wrapponieważ zgodnie ze specyfikacją są to dosłownie alternatywne nazwy dla siebie. Niektóre przeglądarki obsługują jedną, a drugą nie. Firefox (przetestowana wersja 43) obsługuje tylkoword-wrap. Blink (testowany Chrome v45) zajmie albo jedno.- Gdy są
overflow-wrapużywane same w sobie, słowa zepsują się wszędzie tam, gdzie potrzebują. Jeśli występuje znak „dopuszczalnego przerwania” (na przykład dosłowny myślnik), zostanie tam przerwany, w przeciwnym razie po prostu zrobi to, co musi. - Równie dobrze możesz użyć
hyphens, ponieważ wtedy spróbuje gustownie dodać łącznik w miejscu, w którym zrywa się, jeśli przeglądarka go obsługuje (Blink nie w momencie pisania, Firefox to robi). word-break: break-all;to powiedzieć przeglądarce, że można łamać słowo tam, gdzie to konieczne. Mimo że i tak to robi, więc nie jestem pewien, w jakich przypadkach jest to w 100% konieczne.
Jeśli chcesz, aby łączniki były bardziej ręczne, możesz zasugerować je w swoim znaczniku. Zobacz więcej na stronie MDN.
Wsparcie przeglądarki
Dla word-break:
Te dane dotyczące obsługi przeglądarek pochodzą od Caniuse, który zawiera więcej szczegółów. Liczba wskazuje, że przeglądarka obsługuje tę funkcję w tej wersji i nowszych.
Pulpit
| Chrom | Firefox | TO ZNACZY | Brzeg | Safari |
|---|---|---|---|---|
| 44 | 15 | 5.5 | 12 | 9 |
Telefon komórkowy / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 9,0-9,2 |
Dla hypens:
Te dane dotyczące obsługi przeglądarek pochodzą od Caniuse, który zawiera więcej szczegółów. Liczba wskazuje, że przeglądarka obsługuje tę funkcję w tej wersji i nowszych.
Pulpit
| Chrom | Firefox | TO ZNACZY | Brzeg | Safari |
|---|---|---|---|---|
| 88 | 6 * | 10 * | 12 * | 5,1 * |
Telefon komórkowy / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 4,2-4,3 * |
Dla overflow-wrap:
Te dane dotyczące obsługi przeglądarek pochodzą od Caniuse, który zawiera więcej szczegółów. Liczba wskazuje, że przeglądarka obsługuje tę funkcję w tej wersji i nowszych.
Pulpit
| Chrom | Firefox | TO ZNACZY | Brzeg | Safari |
|---|---|---|---|---|
| 23 | 49 | 11 | 18 | 6.1 |
Telefon komórkowy / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4.4 | 7.0-7.1 |
Dla text-overflow:
Te dane dotyczące obsługi przeglądarek pochodzą od Caniuse, który zawiera więcej szczegółów. Liczba wskazuje, że przeglądarka obsługuje tę funkcję w tej wersji i nowszych.
Pulpit
| Chrom | Firefox | TO ZNACZY | Brzeg | Safari |
|---|---|---|---|---|
| 4 | 7 | 6 | 12 | 3.1 |
Telefon komórkowy / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 2.1 | 3.2 |
Zapobieganie przepełnieniu za pomocą wielokropka
Innym podejściem do rozważenia jest całkowite obcięcie tekstu i dodanie wielokropków w miejscu, w którym ciąg tekstu uderza w kontener:
.ellipses ( overflow: hidden; white-space: nowrap; text-overflow: ellipsis; )Zaletą używania text-overflowjest to, że jest obsługiwany uniwersalnie.
Przykłady
Zobacz artykuł Pen Hyphenate Long Words by CSS-Tricks (@ css-tricks) w CodePen.
Zobacz wielokropki pióra autorstwa CSS-Tricks (@ css-tricks) w CodePen.
Zobacz artykuł „Pen Figuring Out Line Wrapping” autorstwa Chrisa Coyiera (@chriscoyier) na CodePen.
Więcej zasobów
- Michael Scharnagl: Radzenie sobie z długimi słowami w CSS
- Kenneth Auchenberg: Zawijanie słów / dzielenie wyrazów za pomocą CSS
- MDN: zawijanie wyrazów, dzielenie wyrazów, łączniki
- Specyfikacja: CSS Text Level 3
Dla skośnych SCSS
Zwykle są to rzeczy, które dodajesz do kodu w razie potrzeby, więc tworzą ładne @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; )