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

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

Valori

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

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

css#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):

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

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

Результат:

Vedi anche