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

Avevo bisogno di aggiustare 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 il word-wrap: break-word; nel mio file CSS e non ha funzionato.

Poi, con mia sorpresa, e con il suggerimento degli Strumenti per gli sviluppatori di Google Chrome, ho provato il word-break: break-word; e ha 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 alla word-break: break-word; è un comportamento documentato visto come W3 non ne parla. L’ho provato su Safari e Chrome, e funziona perfettamente su entrambi, ma sono titubante nell’usare la word-break: break-word; perché non vedo alcuna menzione da nessuna parte.

Aggiornare

Se hai intenzione di rompere le parole e vuoi sillabarti, prova quanto segue:

 .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 sorta di … sans hyphens. Comunque una spiegazione dettagliata è in questo articolo .


word-break:break-word non è documentato e solo gli sviluppatori master conoscono questa tecnica ultra segreta come la Palm of Death tremante .

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

Kenneth.io – Word Hypernation wrapping con CSS

Trucchi CSS – interruzione di parole

Da CaniUse :

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