Attualmente mi chiedo quale sia la differenza tra i due. Quando li ho usati entrambi sembrano rompere la parola se non si adatta al contenitore. Ma perché il W3C ha fatto due modi per farlo?

La specifica W3 che ne parla sembra suggerire che word-break: break-allè per richiedere un comportamento particolare con il testo CJK (cinese, giapponese e coreano), mentre word-wrap: break-wordè il comportamento più generale, non consapevole di CJK.

word-wrap: break-word recentemente cambiato in overflow-wrap: break-word

• avvolgerà le parole lunghe sulla riga successiva.
• regola diverse parole in modo che non si spezzino nel mezzo.

word-break: break-all

• indipendentemente dal fatto che si tratti di una parola continua o di molte parole, le scompone al limite del limite di larghezza. (cioè anche all'interno dei caratteri della stessa parola)

Quindi, se hai molte span di dimensioni fisse che ottengono contenuti in modo dinamico, potresti semplicemente preferire l'uso word-wrap: break-word, poiché in questo modo vengono interrotte solo le parole continue e nel caso in cui sia una frase che comprende molte parole, gli spazi vengono regolati per ottenere parole intatte (nessuna interruzione all'interno di una parola).

E se non importa, scegli uno dei due.

Con word-break, una parola molto lunga inizia nel punto in cui dovrebbe iniziare e viene spezzata per tutto il tempo necessario

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

Tuttavia, con word-wrap, una parola molto lunga NON inizierà nel punto in cui dovrebbe iniziare. si avvolge alla riga successiva e poi viene spezzato per tutto il tempo necessario

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

word-wrapè stato rinominato overflow-wrapprobabilmente per evitare questa confusione.

Questo è ciò che abbiamo:

trabocco-wrap

La proprietà overflow-wrap viene utilizzata per specificare se il browser può interrompere le righe all'interno delle parole al fine di impedire l'overflow quando una stringa altrimenti infrangibile è troppo lunga per rientrare nella sua casella di contenimento.

Valori possibili:

• normale : indica che le linee possono interrompersi solo nei normali punti di interruzione di parole.

• break-word : indica che parole normalmente infrangibili possono essere spezzate in punti arbitrari se non ci sono punti di interruzione altrimenti accettabili nella linea.

fonte .

word-break

La proprietà CSS di interruzione parola viene utilizzata per specificare se interrompere le linee all'interno delle parole.

• normale : utilizza la regola di interruzione di riga predefinita.
• break-all : le interruzioni di parole possono essere inserite tra qualsiasi carattere per il testo non CJK (cinese / giapponese / coreano).
• keep-all : non consentire interruzioni di parole per il testo CJK. Il comportamento del testo non CJK è lo stesso del normale.

fonte .

Ora tornando alla tua domanda, la differenza principale tra overflow-wrap e word-break è che la prima determina il comportamento in una situazione di overflow , mentre la successiva determina il comportamento in una situazione normale (nessun overflow). Una situazione di overflow si verifica quando il contenitore non ha spazio sufficiente per contenere il testo. Rompere le linee su questa situazione non aiuta perché non c'è spazio (immagina una scatola con larghezza e altezza fisse).

Così:

• overflow-wrap: break-word: In caso di tracimazione, rompere le parole.
• word-break: break-all: In una situazione normale, basta rompere le parole alla fine della riga. Non è necessario un overflow.

Almeno in Firefox (a partire dalla v24) e Chrome (a partire dalla v30), quando applicato al contenuto in un tableelemento:

word-wrap:break-word

in realtà non causerà il riavvolgimento di parole lunghe, il che può portare la tabella a superare i limiti del suo contenitore;

word-break:break-all

comporterà il wrapping delle parole e il montaggio della tabella all'interno del suo contenitore.

demo di jsfiddle .

Questo è tutto ciò che posso scoprire. Non sono sicuro che possa aiutare, ma ho pensato di aggiungerlo al mix.

Word-wrap

Questa proprietà specifica se la riga di rendering corrente deve interrompersi se il contenuto supera il limite della casella di rendering specificata per un elemento (questo è in qualche modo simile alle proprietà 'clip' e 'overflow' nell'intento.) Questa proprietà deve essere applicata solo se l'elemento ha un rendering visivo, è un elemento inline con altezza / larghezza esplicite, è assolutamente posizionato e / o è un elemento a blocchi.

WORD-PAUSA

Questa proprietà controlla il comportamento di interruzione di riga all'interno delle parole. È particolarmente utile nei casi in cui vengono utilizzate più lingue all'interno di un elemento.

C'è un'enorme differenza. break-allè sostanzialmente inutilizzabile per il rendering di testo leggibile.

Supponiamo che tu abbia la stringa This is a text from an old magazinein un contenitore che può contenere solo 6 caratteri per riga.

word-break: break-all

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

Come puoi vedere, il risultato è terribile. break-allproverà ad adattare il maggior numero possibile di caratteri in ogni riga, dividerà persino una parola di 2 lettere come "è" su 2 righe! È ridicolo. Questo è il motivo per cui break-allraramente viene mai usato.

word-wrap: break-word

This
is a
text
from
an old
magazi
ne

break-wordromperà solo le parole troppo lunghe per adattarsi al contenitore (come "rivista", che è di 8 caratteri, e il contenitore può contenere solo 6 caratteri). Non romperà mai le parole che potrebbero adattarsi al contenitore nella sua interezza, invece le spingerà verso una nuova linea.

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

parola per continuare a confinare e poi rompere in newline.

word-wrap:break-word :

Inizialmente, la parola a capo in newline quindi continua a confinare.

Esempio :

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>

Dalle rispettive specifiche del W3 - che sembrano essere poco chiare a causa della mancanza di contesto - si può dedurre quanto segue:

• word-break: break-all è per spezzare parole straniere, non CJK (diciamo occidentali) negli scritti di personaggi CJK (cinese, giapponese o coreano).
• word-wrap: break-word è per rompere le parole in una lingua non mista (diciamo solo occidentale).

Almeno, queste erano le intenzioni di W3. Ciò che è effettivamente accaduto è stato un grosso problema con incompatibilità del browser di conseguenza. Ecco un eccellente resoconto dei vari problemi coinvolti .

Il seguente frammento di codice può servire da riepilogo di come ottenere il ritorno a capo automatico utilizzando i CSS in un ambiente cross-browser:

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

Oltre ai commenti precedenti, il supporto del browser per word-wrapsembra essere un po 'meglio di per word-break.