Różnica między zawijaniem i dzieleniem wyrazów?

87

Jaka jest dokładna różnica między overflow-wrap/ word-wrapi word-break? I czy ktoś może mi powiedzieć, co jest lepsze do zrywania bardzo długich połączeń? Większość ludzi twierdzi, że powinieneś używać łamania słów w połączeniu z, overflow-wrapale nie wygląda to zbyt logicznie. Myślę, że najlepszą metodą jest używanie overflow-wrapw połączeniu z word-wraplepszą obsługą różnych przeglądarek. Co myślisz?

html css word-wrap word-break Anzelm
źródło
6
Do wszystkich przyszłych czytelników, którzy mogliby początkowo być zdezorientowani, dlaczego to pytanie zostało zamknięte jako zduplikowane pytanie. CSS Text Moduł Level 3 stanowi, że overflow-wrapi word-wrappowinny być w 100% identyczne funkcjonalności. Osobiście odnoszę wrażenie, że word-wrappowinno to być używane tylko do obsługi starszych przeglądarek i że może zostać wycofane lub usunięte w przyszłej wersji CSS.
Tyler Crompton
23
Do tych, którzy głosowali za zamknięciem: to nie jest duplikat, jak wspomniano, pytanie nie jest takie samo. Domniemany duplikat dotyczy dwóch konkretnych wartości dwóch właściwości, a to pytanie dotyczy dwóch właściwości. Naprawdę nie podoba mi się, że niektórzy ludzie uważają, że mają prawo zabraniać innym odpowiedzi na pytanie. Jeśli nie podoba ci się pytanie, po prostu go nie czytaj!
Hibou57
3
@Tyler Crompton Mylisz się word-wrapzword-break
katamfetamina
1
Zgadzam się z Hibou57. To nie jest duplikat. Szkoda, że ​​jest zamknięty, ponieważ trudno znaleźć odpowiedź na to pytanie w Internecie.
Paul-Hebert
@TylerCrompton To pytanie nie dotyczy word-wrap. Chodzi o to word-break. Zamknięcie tego jako zduplikowanego pytania nie ma sensu.
Lone Learner

Odpowiedzi:

67

Cytowanie ze źródła

  • zawijanie tekstu: właściwość CSS zawijania słów służy do określania, czy przeglądarka może łamać wiersze w słowach, aby zapobiec przepełnieniu, gdy w inny sposób nierozerwalny ciąg jest zbyt długi, aby zmieścić się w polu zawierającym.

  • overflow-wrap : word-wrapnazwa właściwości została zmienionaoverflow-wrap w bieżącej wersji roboczej specyfikacji CSS3 Text

  • podział słów: Właściwość CSS dzielenia wyrazów służy do określania sposobu (lub czy) łamania linii w wyrazach

Potrzebujesz więc dzielenia wyrazów w połączeniu z zawijaniem, co jest właściwą kombinacją.

karthikr
źródło
Cóż, tak word-wrapjest wystarczające, ale jeśli szerokość kontenera jest ograniczona, układ może zostać pomieszany.
karthikr
Dobra, widzę. Używam zawijania słów tylko dla linków, więc układ się nie psuje.
Anselm
7
Znalazłem odpowiedź: „Specyfikacja W3, która o nich mówi, wydaje się sugerować, że łamanie słów: łamanie wszystkiego służy wymaganiu określonego zachowania z tekstem CJK, podczas gdy zawijanie słów: słowo łamanie jest bardziej ogólne, nie-CJK- świadomy, zachowanie ”. ( stackoverflow.com/questions/1795109/ ... ) CJK to zbiorcze określenie języka chińskiego, japońskiego i koreańskiego.
Anselm
O. ale myślałem, że twoje pytanie było zupełnie inne. W każdym razie, cieszę się, że znalazłeś odpowiedzi i ufam, że trochę
pomogłem
4
zawijanie słów jest przestarzałym rozszerzeniem firmy Microsoft (nawet jeśli zostało zaimplementowane jako właściwość bez prefiksu przez większość przeglądarek) i zostało teraz zastąpione zawijaniem przepełnienia. MDN połączyło dwie różne strony w jedną: developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap
CharlesM
8

Pomaga zrozumieć, że w tym momencie word-break: break-wordjest to tak naprawdę alias dla overflow-wrap: anywhere.

word-break: break-wordjest oficjalnie przestarzały; zobacz wersję roboczą modułu tekstowego CSS poziomu 3 :

W celu zapewnienia zgodności ze starszą zawartością word-breakwłaściwość obsługuje również przestarzałe break-wordsłowo kluczowe. Po określeniu ma to taki sam efekt jak word-break: normali overflow-wrap: anywhere, niezależnie od rzeczywistej wartości właściwości przepełnienia-zawijania.

Należy tutaj zauważyć, że word-break: break-wordjest to alias dla overflow-wrap: anywhere, a NIE alias dla overflow-wrap: break-word.

( word-break: normalto tylko domyślna wartość dla word-break, więc możesz ją zignorować, chyba że ustawiasz inną wartość word-break).

Czym się różnią overflow-wrap: anywherei czym overflow-wrap: break-wordróżnią?

Jedyna różnica w dokumentacji między nimi polega na tym, że overflow-wrap: anywhere„ bierze pod uwagę możliwości miękkiego zawijania wprowadzone przez podział słów” podczas „obliczania wewnętrznych rozmiarów minimalnej zawartości”, podczas gdyoverflow-wrap: break-word NIE.

Myślę, że szerokości mogą być dokładniejsze w niektórych przypadkach, jeśli je rozważa?

Ben Wheeler
źródło
7

Oto dokładne różnice: (na podstawie testów w Chrome v81 i potwierdzeniu moich obserwacji przez odniesienie do specyfikacji)

Biała przestrzeń

normal(domyślnie): zwija łańcuchy białych znaków i znaki końca linii; dodaje
nowrapznaki końca wierszy w razie potrzeby : zwija łańcuchy białych znaków i znaki końca wiersza; nie dodaje
pre-lineznaków końca linii : zwija łańcuchy białych znaków; w razie potrzeby dodaje znaki końca wiersza
pre-wrap: brak zwijania; w razie potrzeby dodaje znaki końca wiersza
break-spaces: to samo, co zawijanie wstępne, z wyjątkiem spacji, które mogą wyzwalać dodawanie znaków podziału wiersza
pre : brak zwijania; nie dodaje znaków końca linii

Uwaga: Jeśli wybrana white-spacewartość zawiera „nie dodaje znaków końca wiersza”, nie można zastosować podziału wiersza następujących właściwości (tj. Zignorować).

podział słów

normal(domyślnie): przerywa linię na końcu ostatniego słowa mieszczącego się w kontenerze [jeśli istnieje], w przeciwnym razie linia pozostaje nieprzerwana
break-word: przerywa linię na końcu ostatniego słowa mieszczącego się w kontenerze [jeśli istnieje], w przeciwnym razie na końcu kontenera
break-all: przerywa linię na koniec kontenera [można podzielić słowo, nawet z pobliskimi białymi znakami]

overflow-wrap (starsza nazwa: zawijanie słów)

normal(domyślnie): przerywa linię na końcu ostatniego słowa pasującego do kontenera [jeśli istnieje], w przeciwnym razie linia pozostaje nieprzerwana
break-word: przerywa linię na końcu ostatniego słowa mieszczącego się w kontenerze [jeśli istnieje], w przeciwnym razie na końcu kontenera [jeśli nie jest -flex kontener], w przeciwnym razie linia pozostaje nieprzerwana
anywhere: przerywa linię na końcu ostatniego słowa pasującego do kontenera [jeśli istnieje], w przeciwnym razie na końcu kontenera [tak samo jak word-break: break-word]

Zauważ, że dla overflow-wrap: break-word(jak w przypadku dowolnej kombinacji, która pozostawia linie zbyt długie dla kontenera), nieprzerwana linia może spowodować rozszerzenie kontenera elastycznego poza określony współczynnik elastyczności (zmuszając inne pojemniki elastyczne do skurczenia się, aby uwzględnić zbyt długą zawartość).

Venryx
źródło
na podstawie faktu, że powiedziałeś „na podstawie dokumentów”, zakładam, że ta treść jest w dużej mierze skądś skopiowana? WIĘC zwykle marszczy brwi na zawartość, która jest po prostu kopią treści w innym miejscu, ale tak czy inaczej, podczas kopiowania treści musisz cytować źródła, aby uniknąć plagiatu. Ponadto testowanie w Chrome nie jest wiarygodnym źródłem informacji o tym, czy coś jest zgodne ze specyfikacją.
TylerH
1
@TylerH To nie jest (nawet blisko) czysta kopia treści w innym miejscu. Większość opisów zachowań pochodziła z moich bezpośrednich testów w Chrome, z odniesieniami do stron dokumentacji tylko po to, aby potwierdzić, że zaobserwowane zachowanie jest zgodne ze specyfikacją i upewnić się, że nie brakowało mi dodatkowego zachowania. Daleko od plagiatu. (Zaktualizuję notatkę u góry, aby wyjaśnić)
Venryx
Dla prawdziwego, poważnego i cierpliwego czytelnika, który naprawdę chce wszystko zrozumieć, to najlepsza odpowiedź. Dzięki wielkie.
ZYinMD