Dall' >

Matteo Casati

Gestione del testo che eccede le dimensioni del contenitore con CSS3

di , in HTML5, CSS3,

Per preservare il design di una pagina può risultare necessario limitare la visualizzazione di un testo dinamico affinché non ecceda le dimensioni massime del contenitore. In questo caso è utile dare all'utente un feedback visuale che mostri chiaramente che il testo visualizzato è stato troncato, tipicamente mediante l'aggiunta del carattere di ellipsis (ovvero tre punti di sospensione: ...) al termine della parte visibile.
Con CSS3 è possibile gestire questo comportamento semplicemente impostando la proprietà text-overflow al valore ellipsis (il valore predefinito è invece clip), come mostrato nell'esempio seguente:

<!doctype html>
<html>
<head>
<style>
a 
{ 
    background: yellow; 
    display: inline-block; 
    width: 100px; 
    white-space: nowrap;
    overflow: hidden; 
    text-overflow: ellipsis;    /* IE 6+, FF 7+, WebKit (Safari, Chrome), Opera 11+
    -o-text-overflow: ellipsis; /* Opera 9 e 10 */
}
</style>
</head>
<body>
    <a href="#">Link con testo descrittivo molto lungo</a>
</body>
</html>

Affinché questo comportamento venga correttamente gestito dal browser è necessario fissare le dimensioni del contenitore, specificare la proprietà overflow ad un valore diverso da visible e disabilitare l'interruzione automatica di linea per il testo mediante l'impostazione della proprietà white-space a no-wrap oppure utilizzando il tag nobr.

Commenti

Visualizza/aggiungi commenti

Gestione del testo che eccede le dimensioni del contenitore con CSS3 (#10) 1010 4
| Condividi su: Twitter, Facebook, LinkedIn, Google+
Aggiorna

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi