CSS text-overflow
La proprietà CSS text-overflow controlla come viene troncato il testo che supera il contenitore
La proprietà text-overflow gestisce il comportamento del testo che non può essere mostrato interamente in un contenitore con larghezza limitata. È spesso usata con overflow: hidden e white-space: nowrap per ottenere effetti di taglio con o senza ellissi.
Sintassi
Significato dei valori principali:
-
clip: Il testo che eccede i limiti del contenitore viene semplicemente tagliato senza indicazione visiva.
-
ellipsis: Il testo viene troncato e viene mostrata un'ellissi (...) per indicare che c'è del contenuto non visibile.
Esempio proprietà: text-overflow
Codice Esempio: text-overflow
.overflow-box {
width: 250px;
white-space: nowrap;
overflow: hidden;
border: 1px solid #ccc;
padding: 10px;
font-size: 16px;
margin-bottom: 15px;
}.clip {
text-overflow: clip;
}.ellipsis {
text-overflow: ellipsis;
}
Contenuto Esempio: text-overflow
Esempio di utilizzo di text-overflow
In questo esempio, la proprietà text-overflow viene usata per controllare come visualizzare il testo che eccede la larghezza del contenitore:
CSS e HTML per text-overflow:
<style>
.overflow-box {
width: 250px;
white-space: nowrap;
overflow: hidden;
border: 1px solid #ccc;
padding: 10px;
font-size: 16px;
margin-bottom: 15px;
}
.clip {
text-overflow: clip;
}
.ellipsis {
text-overflow: ellipsis;
}
</style>
<div class="overflow-box clip">
Questo testo è troppo lungo per essere visualizzato interamente.
</div>
<div class="overflow-box ellipsis">
Questo testo è troppo lungo per essere visualizzato interamente.
</div>
Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.
Supporto Browser
IP: 216.73.216.118
