Proprietà text-overflow

La proprietà text-overflow aggiunge i puntini di sospensione alla fine del testo troncato per indicare che il testo non rientrava nel blocco ed è stato troncato.

Per il funzionamento della proprietà, il testo deve essere troncato tramite la proprietà overflow o la proprietà overflow-x con valore hidden, auto o scroll. Se è impostato visible (e così è per impostazione predefinita) - text-overflow non funzionerà.

Sintassi

cssselettore {
  text-overflow: ellipsis | clip;
}

Valori

Valore predefinito: clip.

Esempio . Testo che fuoriesce

In questo esempio, una parola molto lunga non entrerà nel contenitore e fuoriuscirà dai suoi bordi. Non avviene alcun troncamento:

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

css#elem {
  width: 200px;
  overflow: visible;
  border: 1px solid red;
}

Результат:

Esempio . Aggiungiamo la proprietà overflow

Ora, tutto ciò che fuoriesce dai bordi del contenitore, sarà semplicemente troncato:

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

css#elem {
  width: 200px;
  overflow: hidden;
  border: 1px solid red;
}

Результат:

Esempio . Valore ellipsis

Ora, oltre alla proprietà overflow aggiungiamo anche text-overflow con valore ellipsis. Al testo troncato verranno aggiunti i puntini di sospensione alla fine:

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

css#elem {
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid red;
}

Результат:

Esempio . Con le barre di scorrimento

Se si imposta overflow: auto e text-overflow: ellipsis, apparirà la barra di scorrimento, ma i puntini di sospensione verranno comunque aggiunti. Prova a scorrere la barra di scorrimento nell'esempio:

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

css#elem {
  width: 200px;
  overflow: auto;
  text-overflow: ellipsis;
  border: 1px solid red;
}

Результат:

Esempio . Se non ci sono parole molto lunghe

Se non ci sono parole così lunghe da fuoriuscire dal bordo del contenitore, non avverrà alcun troncamento (nulla fuoriesce). Guarda il seguente esempio:

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

css#elem {
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid red;
}

Результат:

Esempio . Testo su una riga

Tuttavia, ci sono situazioni in cui vogliamo che il testo venga troncato se è troppo lungo (il testo in generale, non le singole parole) e non vada a capo sulla riga successiva. Questo si fa aggiungendo la proprietà white-space con valore nowrap, che vieta l'andata a capo del testo. Guarda l'esempio, ora il testo viene troncato:

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

css#elem {
  width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border: 1px solid red;
}

Результат:

Esempio . Larghezza in percentuale

Se si imposta la larghezza del blocco in %, anche il troncamento funzionerà correttamente:

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

css#elem {
  width: 80%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border: 1px solid red;
}

Результат:

Vedi anche