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
Usare un KeyedService di default in ASP.NET Core 8
Miglioramenti nelle performance di Angular 16
Utilizzare Copilot con Azure Cosmos DB
Potenziare Azure AI Search con la ricerca vettoriale
Eseguire query manipolando liste di tipi semplici con Entity Framework Core
Generare la software bill of material (SBOM) in GitHub
Utilizzare gRPC su App Service di Azure
Creare una custom property in GitHub
Migliorare la sicurezza dei prompt con Azure AI Studio
Sfruttare al massimo i topic space di Event Grid MQTT
Criptare la comunicazione con mTLS in Azure Container Apps