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
I nostri prossimi libri su ASP.NET Core, HTML5, C# e VB
Gestire il warmup di una web app Azure in bilanciamento di carico
Migliorare le performance di ASP.NET Core 2.2 su IIS
Tuning automatico di SQL Database su Azure
Utilizzare i value converter in entity Framework Core 2.1
Aggiungere associazioni a file con la Universal Windows Platform
Personalizzare il comportamento della TextBox con la penna nella Universal Windows Platform
Gestione della dimensione del testo nella Universal Windows Platform
Impersonare un utente fittizio per un'applicazione ASP.NET Core
Gestire l'upload dei file in un controller Web API di ASP.NET Core 2.1
Autenticazione con JWT Token e ASP.NET Core Web API
Utilizzare il lazy loading con i proxy in Entity Framework Core 2.1
I più letti di oggi
- ecco tutte le novità pubblicate sui nostri siti questa settimana: http://aspit.co/wkly buon week-end!
- Visual Studio 2019 sarà disponibile a partire dal 2 Aprile
- Creare un overload del metodo Sum di LINQ che somma i TimeSpan
- Migliorare le performance di ASP.NET Core 2.2 su IIS
- Chiamare direttamente un numero di telefono con HTML5
- La fattura elettronica con .NET