Obecnie zastanawiam się, jaka jest różnica między nimi. Kiedy użyłem obu, wydaje się, że łamią słowo, jeśli nie pasuje do pojemnika. Ale dlaczego W3C zrobiło to na dwa sposoby?

Mówiąc o nich, specyfikacja W3 wydaje się sugerować, że word-break: break-allwymaga określonego zachowania w tekście CJK (chińskim, japońskim i koreańskim), podczas gdy word-wrap: break-wordjest to bardziej ogólne, nieświadome CJK zachowanie.

word-wrap: break-word ostatnio zmieniono na overflow-wrap: break-word

• zawinie długie słowa w następnym wierszu.
• dostosowuje różne słowa, aby nie łamały się w środku.

word-break: break-all

• niezależnie od tego, czy jest to ciągłe słowo, czy wiele słów, dzieli je na granicy limitu szerokości. (tzn. nawet w obrębie znaków tego samego słowa)

Więc jeśli masz wiele rozpiętości o stałej wielkości, które dynamicznie uzyskują treść, możesz po prostu wolić używać word-wrap: break-word, ponieważ w ten sposób dzielone są tylko ciągłe słowa, a w przypadku zdania zawierającego wiele słów, spacje są dostosowywane, aby uzyskać nienaruszone słowa (bez przerwy w słowie).

A jeśli to nie ma znaczenia, wybierz jedno z nich.

Z word-breakbardzo długim słowem zaczyna się w miejscu, w którym powinno się zacząć i jest łamane tak długo, jak to konieczne

[X] I am a text that 0123
4567890123456789012345678
90123456789 want to live 
inside this narrow paragr
aph.

Jednak z word-wrapbardzo długim słowem NIE Zaczyna się w miejscu, w którym powinno się zacząć. zawija się do następnej linii, a następnie jest łamany tak długo, jak to konieczne

[X] I am a text that 
012345678901234567890123
4567890123456789 want to
live inside this narrow 
paragraph.

word-wrapzostał przemianowany, aby overflow-wrapprawdopodobnie uniknąć tego zamieszania.

Teraz mamy to:

przepełnienie

Właściwość overflow-wrap służy do określania, czy przeglądarka może przerywać wiersze w słowach, aby zapobiec przepełnieniu, gdy łańcuch, który w przeciwnym razie nie byłby łamliwy, jest zbyt długi, aby zmieścić się w jego polu zawierającym.

Możliwa wartość:

• normal : wskazuje, że linie mogą się łamać tylko w normalnych punktach podziału słów.

• słowo przerywane : Wskazuje, że zwykle niełamliwe słowa mogą być łamane w dowolnych punktach, jeśli w linii nie ma innych akceptowalnych punktów przerwania.

źródło .

podział słów

Właściwość CSS z podziałem słów służy do określania, czy należy przerywać wiersze w słowach.

• normal : użyj domyślnej reguły podziału linii.
• break-all : Podziały wyrazów mogą być wstawiane między dowolne znaki w tekście innym niż CJK (chiński / japoński / koreański).
• keep-all : Nie zezwalaj na podziały słów w tekście CJK. Zachowanie tekstu innego niż CJK jest takie samo, jak w przypadku normalnego.

źródło .

Wracając do pytania, główna różnica między zawijaniem przepełnienia a dzieleniem słów polega na tym, że pierwsze określa zachowanie w sytuacji przepełnienia , a drugie określa zachowanie w sytuacji normalnej (bez przepełnienia). Przelewowy sytuacja zdarza się, gdy pojemnik nie ma wystarczającej ilości miejsca do przechowywania tekstu. Przełamywanie linii w tej sytuacji nie pomaga, ponieważ nie ma miejsca (wyobraź sobie pudełko o stałej szerokości i wysokości).

Więc:

• overflow-wrap: break-word: W przypadku przepełnienia podziel słowa.
• word-break: break-all: W normalnej sytuacji wystarczy rozbić słowa na końcu wiersza. Przepełnienie nie jest konieczne.

Przynajmniej w Firefoksie (od wersji 24) i Chrome (od wersji 30), w przypadku zastosowania do zawartości w tableelemencie:

word-wrap:break-word

nie spowoduje zawijania długich słów, co może spowodować, że tabela przekroczy granice kontenera;

word-break:break-all

spowoduje zawijanie słów i dopasowanie stolika do jego pojemnika.

demo jsfiddle .

To wszystko, co mogę się dowiedzieć. Nie jestem pewien, czy to pomaga, ale pomyślałem, że dodam to do miksu.

ZAWIJANIE TEKSTU

Ta właściwość określa, czy bieżąca renderowana linia powinna się zepsuć, jeśli zawartość przekroczy granicę określonego pola renderowania dla elementu (jest to pod pewnymi względami podobne do właściwości „klip” i „przepełnienie”). Ta właściwość powinna mieć zastosowanie tylko jeśli element ma wizualny rendering, jest elementem wbudowanym o wyraźnej wysokości / szerokości, jest pozycjonowany absolutnie i / lub jest elementem blokowym.

PRZERWA W SŁOWIE

Ta właściwość kontroluje zachowanie łamania wierszy w słowach. Jest to szczególnie przydatne w przypadkach, gdy w jednym elemencie używanych jest wiele języków.

Jest ogromna różnica. break-alljest zasadniczo bezużyteczny do renderowania czytelnego tekstu.

Powiedzmy, że masz ciąg This is a text from an old magazinew pojemniku, który mieści tylko 6 znaków w rzędzie.

word-break: break-all

This i
s a te
xt fro
m an o
ld mag
azine

Jak widać wynik jest okropny. break-allspróbuje dopasować jak najwięcej znaków do każdego wiersza, a nawet podzieli 2-literowe słowo w rodzaju „jest” na 2 wiersze! To jest niedorzeczne. Dlatego break-allrzadko jest używany.

word-wrap: break-word

This
is a
text
from
an old
magazi
ne

break-wordrozbija tylko słowa, które są zbyt długie, by zmieścić się w pojemniku (np. „magazynek”, który ma 8 znaków, a pojemnik mieści tylko 6 znaków). Nigdy nie rozbije słów, które mogłyby zmieścić cały pojemnik, zamiast tego popchnie je do nowej linii.

<div style="width: 100px; border: solid 1px black; font-family: monospace;">
  <h1 style="word-break: break-all;">This is a text from an old magazine</h1>
  <hr>
  <h1 style="word-wrap: break-word;">This is a text from an old magazine</h1>
</div

word-break:break-all :

słowo, aby kontynuować obramowanie, a następnie włóż nowy wiersz.

word-wrap:break-word :

Najpierw zawijaj słowa w nowej linii, a następnie kontynuuj obramowanie.

Przykład:

div {
   border: 1px solid red;
   width: 200px;
}

span {
  background-color: yellow;
}

.break-all {
  word-break:break-all;
 }
.break-word {
  word-wrap:break-word;  
}

<b>word-break:break-all</b>

<div class="break-all">
  This text is styled with
  <span>soooooooooooooooooooooooooome</span> of the text
  formatting properties.
</div>

<b> word-wrap:break-word</b>

<div class="break-word">
  This text is styled with
  <span>soooooooooooooooooooooooooome</span> of the text
  formatting properties.
</div>

Z odpowiednich specyfikacji W3 - które są dość niejasne z powodu braku kontekstu - można wywnioskować:

• word-break: break-all służy do dzielenia obcych, spoza CJK (powiedzmy zachodnich) słów w pismach znaków CJK (chińskich, japońskich lub koreańskich).
• word-wrap: break-word służy do dzielenia słów w nie mieszanym (powiedzmy wyłącznie zachodnim) języku.

Takie były przynajmniej intencje W3. To, co się faktycznie wydarzyło, było dużym problemem z niezgodnościami przeglądarki. Oto doskonały opis różnych problemów .

Poniższy fragment kodu może służyć jako podsumowanie sposobu zawijania słów za pomocą CSS w środowisku przeglądarki internetowej:

-ms-word-break: break-all;
 word-break: break-all;

 /* Non standard for webkit */
 word-break: break-word;

-webkit-hyphens: auto;
   -moz-hyphens: auto;
    -ms-hyphens: auto;
        hyphens: auto;

Oprócz poprzednich komentarzy obsługa przeglądarki word-wrapwydaje się być nieco lepsza niż dla word-break.