Ich frage mich derzeit, was der Unterschied zwischen den beiden ist. Wenn ich beide verwendet habe, scheinen sie das Wort zu brechen, wenn es nicht in den Behälter passt. Aber warum hat W3C zwei Möglichkeiten gewählt?

Die W3-Spezifikation, die darüber spricht, scheint darauf hinzudeuten, dass word-break: break-allein bestimmtes Verhalten mit CJK-Text (Chinesisch, Japanisch und Koreanisch) erforderlich ist, während word-wrap: break-wordes sich um das allgemeinere, nicht CJK-fähige Verhalten handelt.

word-wrap: break-word vor kurzem geändert zu overflow-wrap: break-word

• wird lange Wörter in die nächste Zeile einschließen.
• Passt verschiedene Wörter so an, dass sie nicht in der Mitte brechen.

word-break: break-all

• Unabhängig davon, ob es sich um ein fortlaufendes Wort oder um viele Wörter handelt, werden diese am Rand der Breitenbeschränkung aufgelöst. (dh sogar innerhalb der Zeichen desselben Wortes)

Wenn Sie also viele Bereiche mit fester Größe haben, in denen Inhalte dynamisch abgerufen werden word-wrap: break-word, bevorzugen Sie möglicherweise die Verwendung , da auf diese Weise nur die fortlaufenden Wörter dazwischen unterbrochen werden. Wenn es sich um einen Satz mit vielen Wörtern handelt, werden die Leerzeichen angepasst, um intakte Wörter zu erhalten (keine Pause innerhalb eines Wortes).

Und wenn es keine Rolle spielt, machen Sie es auch.

Mit word-breakbeginnt ein sehr langes Wort an der Stelle, an der es beginnen soll, und es wird so lange gebrochen, wie es erforderlich ist

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

Mit wird word-wrapein sehr langes Wort jedoch NICHT an dem Punkt beginnen, an dem es beginnen sollte. Es wird in die nächste Zeile umgebrochen und dann so lange wie nötig unterbrochen

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

word-wrapwurde overflow-wrapwahrscheinlich umbenannt , um diese Verwirrung zu vermeiden.

Das haben wir jetzt:

Überlaufverpackung

Mit der Eigenschaft " Überlaufumbruch" wird angegeben, ob der Browser Zeilen innerhalb von Wörtern unterbrechen darf, um einen Überlauf zu verhindern, wenn eine ansonsten unzerbrechliche Zeichenfolge zu lang ist, um in das enthaltene Feld zu passen.

Mögliche Werte:

• normal : Zeigt an, dass Zeilen möglicherweise nur an normalen Wortumbruchpunkten unterbrochen werden.

• Unterbrechungswort : Zeigt an, dass normalerweise unzerbrechliche Wörter an beliebigen Punkten unterbrochen werden können, wenn die Zeile keine ansonsten akzeptablen Unterbrechungspunkte enthält.

Quelle .

Wortumbruch

Die Wortumbruch- CSS-Eigenschaft wird verwendet, um anzugeben, ob Zeilen innerhalb von Wörtern unterbrochen werden sollen.

• normal : Verwenden Sie die Standardregel für Zeilenumbrüche.
• break-all : Wortumbrüche können zwischen beliebige Zeichen für Nicht-CJK-Text (Chinesisch / Japanisch / Koreanisch) eingefügt werden.
• Alles behalten : Keine Wortumbrüche für CJK-Text zulassen. Das Verhalten von Nicht-CJK-Text ist das gleiche wie bei normalem Text.

Quelle .

Zurück zu Ihrer Frage: Der Hauptunterschied zwischen Überlaufumbruch und Wortumbruch besteht darin, dass der erste das Verhalten in einer Überlaufsituation bestimmt , während der spätere das Verhalten in einer normalen Situation bestimmt (kein Überlauf). Eine Überlaufsituation tritt auf , wenn der Container nicht genügend Platz für den Text hat. Das Brechen von Linien in dieser Situation hilft nicht, da kein Platz vorhanden ist (stellen Sie sich eine Box mit fester Breite und Höhe vor).

Damit:

• overflow-wrap: break-word: Brechen Sie in einer Überlaufsituation die Wörter.
• word-break: break-all: Unter normalen Umständen brechen Sie einfach die Wörter am Ende der Zeile. Ein Überlauf ist nicht erforderlich.

Zumindest in Firefox (ab Version 24) und Chrome (ab Version 30), wenn auf Inhalte in einem tableElement angewendet :

word-wrap:break-word

führt nicht dazu, dass lange Wörter umbrochen werden, was dazu führen kann, dass die Tabelle die Grenzen ihres Containers überschreitet.

word-break:break-all

führt dazu, dass Wörter umbrochen werden und die Tabelle in den Container passt.

jsfiddle Demo .

Das ist alles was ich herausfinden kann. Ich bin mir nicht sicher, ob es hilft, dachte aber, ich würde es der Mischung hinzufügen.

ZEILENUMBRUCH

Diese Eigenschaft gibt an, ob die aktuell gerenderte Zeile unterbrochen werden soll, wenn der Inhalt die Grenze des angegebenen Renderfelds für ein Element überschreitet (dies ähnelt in gewisser Weise den absichtlichen Eigenschaften "Clip" und "Überlauf".) Diese Eigenschaft sollte nur gelten Wenn das Element ein visuelles Rendering hat, ein Inline-Element mit expliziter Höhe / Breite ist, absolut positioniert ist und / oder ein Blockelement ist.

WORTBRUCH

Diese Eigenschaft steuert das Zeilenumbruchverhalten in Wörtern. Dies ist besonders nützlich, wenn innerhalb eines Elements mehrere Sprachen verwendet werden.

Es gibt einen großen Unterschied. break-allist grundsätzlich unbrauchbar zum Rendern von lesbarem Text.

Angenommen, Sie haben die Zeichenfolge This is a text from an old magazinein einem Container, der nur 6 Zeichen pro Zeile enthält.

word-break: break-all

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

Wie Sie sehen können, ist das Ergebnis schrecklich. break-allwird versuchen, so viele Zeichen wie möglich in jede Zeile zu passen, es wird sogar ein 2-Buchstaben-Wort wie "ist" in 2 Zeilen aufgeteilt! Es ist lächerlich. Deshalb break-allwird es selten verwendet.

word-wrap: break-word

This
is a
text
from
an old
magazi
ne

break-wordbricht nur Wörter, die zu lang sind, um jemals in den Container zu passen (wie "Magazin", das aus 8 Zeichen besteht, und der Container passt nur aus 6 Zeichen). Es werden niemals Wörter gebrochen, die vollständig in den Container passen könnten, sondern sie werden in eine neue Zeile verschoben.

<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 ::

Wort, um weiter zu begrenzen, dann in Newline einbrechen.

word-wrap:break-word ::

Zuerst wird der Zeilenumbruch in die neue Zeile eingefügt, dann wird der Rand fortgesetzt.

Beispiel:

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>

Aus den jeweiligen W3-Spezifikationen , die aufgrund fehlenden Kontexts ziemlich unklar sind, kann man Folgendes ableiten:

• word-break: break-all dient zum Aufbrechen von Fremdwörtern, die nicht von CJK stammen (sagen wir westlich), in CJK-Schriftschriften (Chinesisch, Japanisch oder Koreanisch).
• word-wrap: break-word ist für das Brechen von Wörtern in einer nicht gemischten (sagen wir nur westlichen) Sprache.

Zumindest waren dies die Absichten von W3. Was tatsächlich geschah, war ein großes Problem mit Browser-Inkompatibilitäten. Hier finden Sie eine hervorragende Beschreibung der verschiedenen Probleme .

Das folgende Codefragment kann als Zusammenfassung des Erreichens von Wörtern mit CSS in einer browserübergreifenden Umgebung dienen:

-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;

Zusätzlich zu den vorherigen Kommentaren word-wrapscheint die Browserunterstützung für etwas besser zu sein als für word-break.