Il Clipping text è una modalità di visualizzazione del testo che consiste nel rendere quest’ultimo scorrevole nel caso in cui lo spazio disponibile non sia sufficiente perché risulti interamente visibile; in pratica parliamo di un’operazione che consiste nel nascondere una parte di testo sulla base dell’elemento che lo contiene, lo scrolling (un pò come accade nelle textarea) permetterà di accedere all’intero contenuto.
Immaginiamo di creare un elenco puntato della larghezza massima di 150 px:
<ul>
<li>Primo elemento</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eros risus, aliquam in tincidunt..</li>
<li>Terzo elemento</li>
</ul>
Ecco invece il codice necessario per il clipping text:
ul {
width:150px;
padding-left:0;
list-style:none;
}
li {
overflow:auto;
white-space:nowrap;
text-overflow:ellipsis;
}
Otteremo in queso modo un risultato come il seguente:
Consiglio la lettura di questo interessante articolo per eventuali approfondimenti riguardo all’argomento trattato.
