W3docs
it
Accedi

Proprietà CSS text-overflow

Usa la proprietà CSS text-overflow per specificare come segnalare il testo inline che eccede il contenitore. Scopri i valori e prova gli esempi.

La proprietà CSS text-overflow specifica come il contenuto che supera il suo contenitore viene segnalato all'utente — in genere tagliandolo o sostituendo la parte nascosta con un'ellissi (…). È una delle proprietà CSS3.

Questa pagina tratta la sintassi e i valori, le tre condizioni che un box deve soddisfare affinché text-overflow abbia effetto, come troncare più righe, un errore comune con Flexbox e un elenco completo dei valori.

Perché sono necessarie tre proprietà insieme

Da sola, text-overflow non fa nulla. Descrive soltanto come deve essere reso il testo già in overflow, quindi devi prima far traboccare il testo e nascondere l'eccedenza. Per il troncamento su riga singola hai bisogno di tutte e tre le seguenti proprietà sullo stesso elemento:

  • white-space: nowrap — impedisce al testo di andare a capo, costringendolo su un'unica riga che supera il box.
  • overflow: hidden — ritaglia la parte che esce dal box (senza questo, il testo sarebbe semplicemente visibile all'esterno).
  • text-overflow: ellipsis — indica al browser di contrassegnare il testo ritagliato con un'ellissi invece di un taglio netto.

Se manca una qualsiasi di queste proprietà, l'ellissi non apparirà. Il box necessita anche di una larghezza vincolata (o max-width) affinché ci sia effettivamente qualcosa da far traboccare.

In CSS3 puoi anche fornire una string personalizzata al posto dell'ellissi. Un valore string può contenere spazi bianchi, oppure puoi usare qualsiasi altra string personalizzata. Nelle bozze più vecchie della specifica era possibile usare un URL a un'immagine, ma questa opzione è stata eliminata.

Valore inizialeclip
Si applica aElementi contenitore di blocco.
EreditatoNo.
AnimabileNo.
VersioneCSS3
Sintassi DOMobject.style.textOverflow = "ellipsis";

Sintassi

Valori CSS text-overflow

text-overflow: clip | ellipsis | string | initial | inherit;

Esempio della proprietà text-overflow:

Esempio di codice CSS text-overflow

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        white-space: nowrap;
        background-color: #eee;
        width: 50px;
        overflow: hidden;
        text-overflow: ellipsis;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <h2>Text-overflow property example</h2>
    <h3>text-overflow: ellipsis</h3>
    <div>Lorem Ipsum</div>
  </body>
</html>
Provalo tu stesso »

Risultato

CSS text-overflow con i valori clip ed ellipsis

Esempio della proprietà text-overflow con i valori "clip", "ellipsis" e "initial":

Esempio CSS text-overflow con i valori clip ed ellipsis

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.element1 {
        white-space: nowrap;
        background-color: #eee;
        width: 50px;
        overflow: hidden;
        text-overflow: clip;
        border: 1px solid #666;
      }
      div.element2 {
        white-space: nowrap;
        background-color: #eee;
        width: 50px;
        overflow: hidden;
        text-overflow: ellipsis;
        border: 1px solid #666;
      }
      div.element3 {
        white-space: nowrap;
        background-color: #eee;
        width: 50px;
        overflow: hidden;
        text-overflow: initial;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <h2>Text-overflow property example</h2>
    <h3>text-overflow: clip</h3>
    <div class="element1">Lorem Ipsum</div>
    <h3>text-overflow: ellipsis</h3>
    <div class="element2">Lorem Ipsum</div>
    <h3>text-overflow: initial</h3>
    <div class="element3">Lorem Ipsum</div>
  </body>
</html>
Provalo tu stesso »

Troncare più righe

text-overflow: ellipsis funziona solo su una singola riga. Per limitare il testo a un numero fisso di righe e aggiungere un'ellissi dopo l'ultima, usa l'approccio -webkit-line-clamp. È ampiamente supportato dai browser moderni nonostante il prefisso vendor:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 200px;
        background-color: #eee;
        border: 1px solid #666;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <h2>Clamp to two lines</h2>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
      eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </body>
</html>

Qui non si imposta white-space: nowrap, perché il testo deve andare a capo prima di essere limitato.

Attenzione: figli di Flexbox e CSS Grid

Un elemento figlio di Flexbox o CSS Grid ha un min-width predefinito di auto, che si rifiuta di ridursi al di sotto della dimensione intrinseca del contenuto. Questo impedisce a overflow: hidden di attivarsi, quindi l'ellissi non appare mai anche se tutte e tre le proprietà sono impostate. La soluzione è aggiungere min-width: 0 (oppure overflow: hidden) all'elemento da troncare:

.flex-child {
  min-width: 0;        /* allow the item to shrink */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Valori

ValoreDescrizioneProva
clipTaglia il testo al limite dell'area di contenuto; il troncamento può avvenire nel mezzo di un carattere. Questo è il valore predefinito.Prova »
ellipsisVisualizza un'ellissi ("...") per indicare il testo ritagliato. Nota: funziona solo su una singola riga di testo.Prova »
&lt;string&gt;Visualizza la string specificata per rappresentare il testo ritagliato. La string viene mostrata all'interno dell'area di contenuto. Nota: supporto limitato nei browser più vecchi.Prova »
initialImposta la proprietà al suo valore predefinito.Prova »
inheritEredita la proprietà dall'elemento padre.

Esercizio

Pratica
La proprietà text-overflow funziona se
La proprietà text-overflow funziona se
Was this page helpful?