In questo articolo impareremo a conoscere le seguenti proprietà:

• text-overflow
• word-wrap
• word-break
• writing-mode

CSS Text Overflow

La proprietà text-overflow CSS specifica come segnalare all'utente il contenuto in overflow che non viene visualizzato.

Può essere ritagliato oppure può essere reso come puntini di sospensione (...) :

p.test1 {
  white-space: nowrap;
  width: 200px;
  border: 1px solid #000000;
  overflow: hidden;
  text-overflow: clip;
}

p.test2 {
  white-space: nowrap;
  width: 200px;
  border: 1px solid #000000;
  overflow: hidden;
  text-overflow: ellipsis;
}

Visualizza esempio

L'esempio seguente mostra come visualizzare il contenuto in overflow quando si passa il mouse sopra l'elemento:

div.test:hover {
  overflow: visible;
}

Visualizza esempio

A capo automatico delle parole

La proprietà CSS word-wrap consente alle parole lunghe di poter essere spezzate e mandate a capo nella riga successiva.

Se una parola è troppo lunga per rientrare in un'area, si espande all'esterno.

La proprietà word-wrap consente di forzare il ritorno a capo del testo, anche se ciò significa dividerlo nel mezzo di una parola.

Il codice CSS è il seguente:

p {
  word-wrap: break-word;
}

Visualizza esempio

Interruzione delle parole

La proprietà CSS word-break specifica le regole di interruzione di riga.

Il codice CSS è il seguente:

p.test1 {
  word-break: keep-all;
}

p.test2 {
  word-break: break-all;
}

Visualizza esempio

Modalità di scrittura

La proprietà writing-mode CSS specifica se le righe di testo sono disposte orizzontalmente o verticalmente.

L'esempio seguente mostra alcune diverse modalità di scrittura:

p.test1 {
  writing-mode: horizontal-tb;
}

span.test2 {
  writing-mode: vertical-rl;
}

p.test2 {
  writing-mode: vertical-rl;
}

Visualizza esempio

Proprietà degli effetti di testo CSS