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
Load test di ASP.NET Core con k6
Specificare il versioning nel path degli URL in ASP.NET Web API
Utilizzare la session affinity con Azure Container Apps
Autenticarsi in modo sicuro su Azure tramite GitHub Actions
Usare lo spread operator con i collection initializer in C#
Utilizzare un service principal per accedere a Azure Container Registry
Utilizzare Model as a Service su Microsoft Azure
Criptare la comunicazione con mTLS in Azure Container Apps
Utilizzare l'operatore GroupBy come ultima istruzione di una query LINQ in Entity Framework
Creare form tipizzati con Angular
Effettuare il pull di git LFS in un workflow di GitHub
Creare gruppi di client per Event Grid MQTT