Gestiamo il testo in eccedenza con Text-Overflow

Puntini sospensivi… Oggi ti voglio parlare della proprietà text-overflow, che per molti risulta forse sconosciuta ma (stranamente) ben supportata da […]
Gestiamo il testo in eccedenza con Text-Overflow

Puntini sospensivi…

Oggi ti voglio parlare della proprietà text-overflow, che per molti risulta forse sconosciuta ma (stranamente) ben supportata da IE6 in avanti, ma non supportata da Firefox fino alla versione 4. La proprietà in questione consente di nascondere il testo in eccedenza mostrando tre puntini sospensivi alla fine, un pò come avviene lato PHP quando viene applicata la funzione substr().

Grande compatibilità

La tabella seguente mostra molto chiaramente che vi è una larga compatibilità e il verde , come già ti facevo notare prima, regna sovrano nella prima colonna, quella relativa a Internet Explorer.

text-overflow

La parte di coding e alcuni consigli utili

Utilizzerò un semplicissimo elenco per testare la suddetta proprietà.

La parte html

<ul>
    <li>Il testo è molto lungo e verrà tagliato perchè supera i 300px da me impostati</li>
    <li>Questo testo invece non verrà tagliato</li>
</ul>

La parte CSS

li{
    white-space:nowrap;
    overflow:hidden;
    width:300px;
    text-overflow:ellipsis;
    -o-text-overflow:ellipsis;
}

Affichè la proprietà funzioni bene è necessario che l’elemento che contiene il testo, nel nostro caso tutti gli “li”, abbiano obbligatoriamente una larghezza, il white-space su nowrap e infine l’overflow che può assumere tutti i valori tranne che visible. Se per esigenze grafiche non possiamo attribuire una larghezza direttamente agli elementi della lista, possiamo attribuirla direttamente alla lista stessa quindi al tag “ul” e poi settare width:100% ai singoli elementi “li”.

Esempio pratico

Il risultato sarà il seguente.

  • Il testo è molto lungo e verrà tagliato perchè supera i 300px da me impostati
  • Questo testo invece non verrà tagliato

Considerazioni finali

L’apetto positivo, analizzando il codice è che la regola fa in modo che la larghezza e quindi la width dell’elemento, sia effettivamente 300px compresi i tre puntini sospensivi. I puntini fanno parte dei 300 pixel, e non sforando dall’area di contenuto, non creano nessun problema di carattere strutturale.

La nota dolente è proprio la scarsa compatibilità con l’intera famiglia di Mozilla Firefox. Se state utilizzando Firefox come browser infatti noterete che il testo viene correttamente tagliato in quanto la proprietà overflow e la width vengono interpretate come è giusto che sia, ma come potrai ben notare mancono i tre puntini sospensivi che sono fondamentali per capire che il testo è stato tagliato. Ed essendo questo uno dei browser piu usati al mondo, bisogna riflettere bene su come usarla e quando. Potrebbe infatti non essere chiaro agli utenti firefox che quel testo abbia un continuo e potrebbe risultare più un errore che altro. Un altro limite è che il testo deve per forza stare su di un unica riga e quindi risulta poco utile se per esigenze grafiche e strutturali abbiamo bisogno di piccoli blocchi di testo da visualizzare.

Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github