Differenza tra word-wrap: break-word e word-break: break-word

Question

Avevo bisogno di correggere qualche CSS da qualche parte perché il mio testo non era avvolgente e andava avanti all'infinito se fosse una parola estremamente lunga.

Come nella maggior parte dei casi, ho provato word-wrap: break-word; nel mio file CSS e non ha funzionato.

Quindi, con mia sorpresa, e con il suggerimento di Google Chrome Developer Tools, ho provato word-break: break-word; e risolto il mio problema. Sono rimasto scioccato da questo, quindi ho cercato su google per capire la differenza tra questi due, ma non ho visto nulla sull'argomento.

Inoltre, non penso che word-break: break-word; sia un comportamento documentato visto che come W3 non ne parla. L'ho provato su Safari e Chrome, e funziona perfettamente su entrambi, ma sono titubante nell'usare word-break: break-word; perché non ne ho mai sentito parlare da nessuna parte.

Answer 1

Aggiornamento

Se si ha intenzione di rompere le parole e da sillabare così, provare i seguenti:

.hyphenate { 
    overflow-wrap: break-word; 
    word-wrap: break-word; 
    -webkit-hyphens: auto; 
    -ms-hyphens: auto; 
    -moz-hyphens: auto; 
    hyphens: auto; 
} 

questo ha funzionato anche in Chrome ... una specie di ... sans trattini . Comunque una spiegazione dettagliata è in questo article.

---

word-break:break-word non è documentato e solo gli sviluppatori principali conoscono questa tecnica ultra segreta come la Palmare della Morte tremante.

In realtà è una proprietà di -webkit- oscura che funziona come word-wrap: break-word ma è anche utilizzata anche su lunghezze dinamiche.

Kenneth.io - Word Wrapping Hypernation Using CSS

CSS-Tricks - word-break

Da CaniUse:

Chrome, Safari e altri browser WebKit/Blink anche sostenere il valore non ufficiale break-word che viene trattato come word-wrap: break-word.