La overflow-wrapproprietà in CSS consente di specificare che il browser può spezzare una riga di testo all'interno dell'elemento mirato su più righe in una posizione altrimenti indistruttibile. Ciò consente di evitare che una stringa di testo insolitamente lunga causi problemi di layout a causa dell'overflow.
.example ( overflow-wrap: break-word; )Valori
normal: il predefinito. Il browser interromperà le righe in base alle normali regole di interruzione di riga. Parole o stringhe ininterrotte non si romperanno, anche se traboccano dal contenitore.break-word: parole o stringhe di caratteri che sono troppo grandi per entrare nel loro contenitore si interromperanno in una posizione arbitraria per forzare un'interruzione di riga. Non verrà inserito un trattino, anche sehyphensviene utilizzata la proprietà.inherit: l'elemento targetizzato deve ereditare il valore dellaoverflow-wrapproprietà definita sul suo genitore immediato.
La demo seguente ha un pulsante di attivazione / disattivazione che ti consente di passare da normale break-word.
Guarda la demo Pen overflow-wrap / word-wrap di Louis Lazaris (@impressivewebs) su CodePen.
Per dimostrare il problema che overflow-wraptenta di risolvere, la demo utilizza una parola insolitamente lunga all'interno di un contenitore relativamente piccolo. Quando si break-wordattiva, la parola viene interrotta per adattarsi alla piccola quantità di spazio disponibile, come se la parola fosse più parole.
Una stringa di caratteri spazio unificatori ( ) verrebbe trattata allo stesso modo e si spezzerebbe anche in un punto appropriato.
overflow-wrapè utile se applicato a elementi che contengono contenuti generati dagli utenti non moderati (come le sezioni dei commenti). Ciò può impedire che URL lunghi e altre stringhe di testo ininterrotte (ad esempio atti di vandalismo) danneggino il layout di una pagina web.
Somiglianze con la word-breakproprietà
overflow-wrape si word-breakcomportano in modo molto simile e possono essere utilizzati per risolvere problemi simili. Un riassunto di base della differenza, come spiegato nella specifica CSS è:
overflow-wrapè generalmente utilizzato per evitare problemi con stringhe lunghe che causano layout interrotti a causa del testo che scorre all'esterno di un contenitore.word-breakspecifica le opportunità di avvolgimento morbido tra le lettere comunemente associate a lingue come cinese, giapponese e coreano (CJK).
Dopo aver descritto esempi di come word-breakpuò essere utilizzato nel contenuto CJK, la specifica dice: "Per abilitare ulteriori opportunità di interruzione solo in caso di overflow, vedere overflow-wrap".
Da ciò, possiamo supporre che word-breaksia meglio utilizzato con contenuti non in inglese che richiedono regole specifiche per spezzare le parole e che potrebbero essere intervallati da contenuti in inglese, mentre overflow-wrapdovrebbero essere usati per evitare layout interrotti a causa di stringhe lunghe, indipendentemente dalla lingua utilizzata .
La word-wrapproprietà storica
overflow-wrapè il nome standard per il suo predecessore, la word-wrapproprietà. word-wrapera originariamente una funzionalità esclusiva di Internet Explorer che alla fine è stata supportata in tutti i browser nonostante non fosse uno standard.
word-wrapaccetta gli stessi valori di overflow-wrape si comporta allo stesso modo. Secondo le specifiche, i browser "devono considerare word-wrapun nome alternativo per la overflow-wrapproprietà, come se fosse una scorciatoia di overflow-wrap". Inoltre, tutti i programmi utente devono supportare word-wrapindefinitamente, per motivi legacy.
Entrambi overflow-wrape word-wrappasseranno la convalida CSS fintanto che il validatore è impostato per testare con CSS3 o superiore (attualmente l'impostazione predefinita).
Relazionato
- word-break
- trattini
- spazio bianco
- Gestione di parole lunghe e URL
Maggiori informazioni
- A capo automatico: una proprietà CSS3 che funziona in ogni browser
- Overflow Wrapping su W3C
- Discussione su Stack Overflow su
word-breakvs.overflow-wrap
Supporto browser
Questi dati di supporto del browser provengono da Caniuse, che ha più dettagli. Un numero indica che il browser supporta la funzione a quella versione e successive.
Desktop
| Cromo | Firefox | IE | Bordo | Safari |
|---|---|---|---|---|
| 23 | 49 | 11 | 18 | 6.1 |
Mobile / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4.4 | 7.0-7.1 |
Il supporto "parziale" sopra indicato è dovuto ai browser meno recenti che supportano word-wrapma non lo sono overflow-wrap. L'utilizzo di entrambi può garantire la compatibilità con le versioni precedenti.
La versione bozza dell'editor della specifica W3C include un nuovo valore chiamato break-spacesche si occupa di sequenze di caratteri di spazio bianco "conservati". Non esiste un supporto browser noto per questa funzione e non è inclusa nella versione bozza funzionante della specifica.