Corsi on-line

Gestire i testi non visibili con text-overflow

text-overflow è il nome di una proprietà CSS concepita per definire come un contenuto troppo esteso per l’elemento destinato a contenerlo, e quindi in parte non visibile, dovrà essere segnalato all’utente; il valore di default di tale proprietà è clip, esso in pratica si limita a tagliare il testo per evitare che possa “straripare” (del resto è questo il significato letterale dall’Inglese del termine “overflow“) oltre il proprio contenitore, come per esempio una divbox.

Un altro valore associabile a text-overflow è ellipsis, quest’ultimo aggiunge in pratica tre punti di sospensione (“…”) in sostituzione del testo mancante; si ipotizzi per esempio di applicare la proprietà alla stringa “Fusce at aliquet diam. Aenean vehicula urna in quam accumsan.“, con clip si potrebbe ottenere un risultato simile al seguente:

Fusce at aliquet diam. Aenean

Mentre con ellipsis l’output generato dovrebbe essere sul modello di quello proposto di seguito:

Fusce at aliquet diam. Aen…

Per spiegare meglio quanto esposto fino ad ora è possibile proporre un semplice esempio che restituisca immediatamente l’effetto derivante dai due valori precedentemente presentati; nel caso specifico verranno definiti innanzitutto due selettori CSS (#div-box-clip e #div-box-ellipsis):

#div-box-clip {
margin: 10px;
white-space: nowrap;
width: 10em;
overflow: hidden;
text-overflow: clip;
border: 2px dashed grey;
}

#div-box-ellipsis {
margin: 10px;
white-space: nowrap;
width: 10em;
overflow: hidden;
text-overflow: ellipsis;
border: 2px dashed red;
}

per poi associarli alle rispettive divbox nel markup HTML:

In questo primo caso è stato utilizzato il valore "clip":
<div id="div-box-clip">Fusce at aliquet diam. Aenean vehicula urna in quam accumsan.</div>
In questo secondo caso è stato utilizzato il valore "ellipsis":
<div id="div-box-ellipsis">Fusce at aliquet diam. Aenean vehicula urna in quam accumsan.</div>

In modo da ottenere un risultato come il seguente:tover

Per comodità del lettore proporremo di seguito il codice nel suo complesso della pagina Web rappresentata in figura:

<!DOCTYPE html>
<html>
<head>
<style>
h1, p{
    padding: 5px;
}
#div-container{
    width: 50%;
    margin: 0 auto;
    border: 2px dashed black;
}
#div-box-clip {
    margin: 10px;
    white-space: nowrap; 
    width: 10em; 
    overflow: hidden;
    text-overflow: clip; 
    border: 2px dashed grey;
}
#div-box-ellipsis {
    margin: 10px;
    white-space: nowrap; 
    width: 10em; 
    overflow: hidden;
    text-overflow: ellipsis; 
    border: 2px dashed red;
}
</style>
</head>
<body>
<div id="div-container">
<h1>Semplice esempio di utilizzo della proprietà text-overflow:</h1>
<p>In questo primo caso è stato utilizzato il valore "clip":</p>
<div id="div-box-clip">Fusce at aliquet diam. Aenean vehicula urna in quam accumsan.</div>
<p>In questo secondo caso è stato utilizzato il valore "ellipsis":</p>
<div id="div-box-ellipsis">Fusce at aliquet diam. Aenean vehicula urna in quam accumsan.</div>
</div>
</body>
</html>

La proprietà text-overflow è compatibile con tutte le versioni aggiornate dei browser Web più utilizzati.

Post correlati
I più letti del mese
Tematiche