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
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Utilizzare Tailwind CSS all'interno di React: primi componenti
Semplificare il deployment di siti statici con Azure Static Web App
Utilizzare politiche di resiliency con Azure Container App
Code scanning e advanced security con Azure DevOps
Evitare il flickering dei componenti nel prerender di Blazor 8
Sfruttare lo stream rendering per le pagine statiche di Blazor 8
Gestire liste di tipi semplici con Entity Framework Core
Determinare lo stato di un pod in Kubernetes
Generare token per autenicarsi sulle API di GitHub
Generare file PDF da Blazor WebAssembly con iText
Utilizzare la versione generica di EntityTypeConfiguration in Entity Framework Core
Utilizzare la libreria Benchmark.NET per misurare le performance
I più letti di oggi
- Miglioramenti nelle performance di Angular 16
- Ottimizzare le performance delle collection con le classi FrozenSet e FrozenDictionary
- HTML5 con CSS e JavaScript
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Ottimizzazione dei block template in Angular 17
- Disabilitare automaticamente un workflow di GitHub (parte 2)