Proprietà overflow-wrap

La proprietà overflow-wrap consente di trasferire le lettere di una parola lunga su una nuova riga, se questa parola non entra nella larghezza del contenitore.

Sintassi

selettore {
	overflow-wrap: break-word | normal;
}

Valori

Valore	Descrizione
`break-word`	Forza le parole lunghe ad andare a capo su una nuova riga, se la parola non si adatta al contenitore. In questo caso, la parola inizierà su una nuova riga.
`normal`	Comportamento standard: se una parola lunga non entra nella larghezza del contenitore - semplicemente uscirà oltre il suo bordo (e inizierà su una nuova riga).

Valore predefinito: normal.

Esempio . Valore normal

In questo esempio, una parola molto lunga non entrerà nel contenitore e uscirà oltre i suoi bordi (e inizierà su una nuova riga):

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur adipiscing elit.
</div>

#elem {
	word-wrap: normal;
	overflow-wrap: normal;
	border: 1px solid red;
	width: 200px;
}

Esempio . Valore break-word

E ora le lettere che non entravano, semplicemente andranno a capo sulla riga successiva (e la parola lunga inizierà comunque su una nuova riga):

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur adipiscing elit.
</div>

#elem {
	overflow-wrap: break-word;
	border: 1px solid red;
	width: 200px;
}

Vedi anche

la proprietà word-break,
che consente anche di trasferire le lettere di una parola lunga su una nuova riga
la proprietà word-wrap,
che è il nome obsoleto per la proprietà overflow-wrap
la proprietà hyphens,
che abilita la sillabazione
il tag wbr,
che implementa interruzioni di riga condizionali tramite HTML
il tag br,
con cui è possibile forzare un'interruzione di riga del testo