overflow-wrapNieruchomość w CSS pozwala określić, że przeglądarka może złamać linię tekstu wewnątrz elementu docelowego na wielu liniach w inny sposób nierozerwalny miejscu. Pomaga to uniknąć nietypowo długiego ciągu tekstu, powodującego problemy z układem z powodu przepełnienia.
.example ( overflow-wrap: break-word; )Wartości
normal: domyślny. Przeglądarka będzie łamać linie zgodnie z normalnymi zasadami łamania linii. Słowa lub nieprzerwane ciągi nie zostaną przerwane, nawet jeśli przepełnią kontener.break-word: słowa lub ciągi znaków, które są zbyt duże, aby zmieścić się w ich kontenerze, zostaną przerwane w dowolnym miejscu, aby wymusić podział wiersza. Znak łącznika nie zostanie wstawiony, nawet jeślihyphenswłaściwość jest używana.inherit: element docelowy musi dziedziczyć wartośćoverflow-wrapwłaściwości zdefiniowanej w jego bezpośrednim nadrzędnym.
Poniższe demo ma przycisk przełączania, który umożliwia przełączanie między normali break-word.
Zobacz demo przepełnienia / zawijania wyrazów Pen autorstwa Louisa Lazarisa (@impressivewebs) na CodePen.
Aby zademonstrować problem, który overflow-wrappróbuje się rozwiązać, wersja demonstracyjna używa niezwykle długiego słowa wewnątrz stosunkowo małego pojemnika. Po break-wordwłączeniu słowo jest łamane, aby pomieścić niewielką ilość dostępnego miejsca, tak jakby słowo składało się z wielu słów.
Ciąg nierozdzielających znaków spacji ( ) byłby traktowany w ten sam sposób i również byłby przerywany w odpowiednim miejscu.
overflow-wrapjest przydatna w przypadku stosowania do elementów, które zawierają niemoderowane treści generowane przez użytkowników (np. sekcje komentarzy). Może to zapobiec uszkodzeniu układu strony internetowej przez długie adresy URL i inne nieprzerwane ciągi tekstu (np. Wandalizm).
Podobieństwa do word-breakWłasności
overflow-wrapi word-breakzachowują się bardzo podobnie i mogą być wykorzystane do rozwiązywania podobnych problemów. Podstawowe podsumowanie różnicy, jak wyjaśniono w specyfikacji CSS, to:
overflow-wrapjest zwykle używany w celu uniknięcia problemów z długimi ciągami, które powodują zepsute układy z powodu wypływu tekstu poza kontener.word-breakokreśla możliwości zawijania miękkiego między literami powszechnie kojarzonymi w językach takich jak chiński, japoński i koreański (CJK).
Po opisaniu przykładów word-breakwykorzystania zawartości CJK, specyfikacja mówi: „Aby włączyć dodatkowe możliwości przerw tylko w przypadku przepełnienia, zobacz overflow-wrap”.
Na tej podstawie możemy przypuszczać, że word-breaknajlepiej nadaje się do treści nieanglojęzycznych, które wymagają określonych reguł łamania słów i które mogą być przeplatane treściami w języku angielskim, podczas gdy overflow-wrappowinno być używane w celu uniknięcia nieprawidłowych układów z powodu długich ciągów, niezależnie od używanego języka .
word-wrapWłasność historyczna
overflow-wrapjest standardową nazwą poprzednika, word-wrapwłaściwości. word-wrapbył pierwotnie zastrzeżoną funkcją tylko w Internet Explorerze, która ostatecznie została obsługiwana we wszystkich przeglądarkach, mimo że nie jest standardem.
word-wrapakceptuje te same wartości co overflow-wrapi zachowuje się w ten sam sposób. Zgodnie ze specyfikacją przeglądarki „muszą traktować word-wrapjako alternatywną nazwę overflow-wrapwłaściwości, tak jakby była to skrót od overflow-wrap”. Ponadto wszyscy agenci użytkownika są zobowiązani do wsparcia na word-wrapczas nieokreślony ze względu na starsze wersje.
Oba overflow-wrapi word-wrapprzejdą walidację CSS, o ile walidator jest ustawiony na testowanie w CSS3 lub nowszym (obecnie jest to ustawienie domyślne).
Związane z
- podział słów
- Myślniki
- Biała przestrzeń
- Obsługa długich słów i adresów URL
Więcej informacji
- Zawijanie słów: właściwość CSS3, która działa w każdej przeglądarce
- Zawijanie przepełnienia na W3C
- Dyskusja na temat przepełnienia stosu na
word-breakvs.overflow-wrap
Wsparcie przeglądarki
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 |
Wspomniane powyżej „częściowe” wsparcie wynika z obsługi starszych przeglądarek, word-wrapale nie overflow-wrap. Korzystanie z obu może zapewnić zgodność wsteczną.
Wersja robocza specyfikacji W3C wydawcy zawiera nową wartość o nazwie, break-spacesktóra dotyczy sekwencji „zachowanych” białych znaków. Nie jest znana żadna przeglądarka obsługująca tę funkcję i nie jest ona uwzględniona w roboczej wersji roboczej specyfikacji.