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
nowrap
znaki końca wierszy w razie potrzeby : zwija łańcuchy białych znaków i znaki końca wiersza; nie dodaje
pre-line
znakó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-space
wartość 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ść).
overflow-wrap
iword-wrap
powinny być w 100% identyczne funkcjonalności. Osobiście odnoszę wrażenie, żeword-wrap
powinno 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.