Firefox e il bug del text-overflow:ellipsis

I puntini si sospensione ottenuti dalla proprietà text-overflow:ellipsis danno origine ad un bug di sovrapposizione in Firefox. Vediamo meglio nel dettaglio.
Firefox e il bug del text-overflow:ellipsis

Descrizione del bug

La causa di questo bug sono i tre puntini che appaiono se utilizziamo la proprietà text-overflow:ellipsis. L’ho soprannominato: il bug di sovrapposizione, perchè viene originato quando vi è un accavallamento di 2 elementi. Il primo elemento, un box in position:absolute, se posizionato sopra al secondo elemento in text-overflow:ellipsis, noteremo che solo i puntini di sospensione si troveranno al di sopra del box.

Come aggirare il bug

Il bug può essere risolto in un modo semplicissimo, basta disporre l’elemento absolute ad un livello superiore attraverso la proprietà z-index.

div{
    width:200px; 
    height:200px; 
    position:absolute; 
    top:0px; 
    left:0px; 
    background:#ccc; 
    z-index:1;
}

p{
    width:150px; 
    overflow:hidden; 
    text-overflow:ellipsis; 
    white-space:nowrap;
}

Nella demo che segue puoi vedere il bug. Assicurati però di aprirlo con Firefox 😉

Provalo subito

Prova la demo Consulta il codice
Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github