Proprietà word-break

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

Sintassi

cssselettore {
  word-break: break-all | keep-all | normal;
}

Valori

Valore	Descrizione
`break-all`	Forza le parole lunghe a andare a capo su una nuova riga, se la parola non entra nel contenitore.
`keep-all`	Per andare a capo dei caratteri ideografici.
`normal`	Comportamento standard: se una parola lunga non rientra in larghezza nel contenitore - essa semplicemente uscirà dai suoi bordi (in questo caso inizierà su una nuova riga).

Valore predefinito: normal.

Esempio . Valore normal

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

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

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

Результат:

Esempio . Valore break-all

E ora le lettere che non entravano, semplicemente andranno a capo sulla riga successiva:

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

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

Результат:

Vedi anche

la proprietà overflow-wrap,
che consente anche di trasferire le lettere di una parola lunga su una nuova riga
la proprietà hyphens,
che abilita le parole a capo per sillabe
la proprietà overflow,
che taglia le parti che fuoriescono dal bordo del blocco
il tag wbr,
che implementa le parole a capo condizionate tramite HTML
il tag br,
con cui è possibile forzare il testo a andare a capo su una nuova riga