Propietat text-overflow CSS3

El CSS3 ens permet, a partir d’un text, definir una amplada màxima i afegir punts suspensius al final. Això ho farem definint una amplada i llargada de l’element HTML que ens servirà de contenidor del text i aplicant-li les següents propietats:

.llista li {
    margin-bottom: 5px;
    width: 200px;
    height: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Gràcies a aquest codi i donat un element <UL> amb la classe “llista”, obtindrem una llista on qualsevol text que sobrepassi els 200px serà tallat amb tres punts suspensius “…”.

Podeu veure l’exemple:

Leave a Reply

Your email address will not be published. Required fields are marked *