Dall'archivio script > HTML5

Gestione del testo che eccede le dimensioni del contenitore con CSS3

di Matteo CasatiMatteo Casati, 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

| Condividi su: LinkedIn, Facebook
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