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
Creare una libreria CSS universale - Rotazione degli elementi
Sfruttare gli embedding e la ricerca vettoriale con Azure SQL Database
Inference di dati strutturati da testo con Semantic Kernel e ASP.NET Core Web API
Recuperare automaticamente un utente e aggiungerlo ad un gruppo di Azure DevOps
Gestione ciclo di vita in .NET Aspire
Recuperare le subissue e il loro stato di completamento in GitHub
Implementare il throttle in JavaScript
Creare una libreria CSS universale: Clip-path
Combinare Container Queries e Media Queries
Utilizzare il metodo IntersectBy per eseguire l'intersection di due liste
Aggiornare a .NET 9 su Azure App Service
Supportare la sessione affinity di Azure App Service con Application Gateway
I più letti di oggi
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Documentare i servizi REST con Swagger e OpenAPI con .NET 9
- Impersonation di utente per l'esecuzione di codice in una pagina ASP.NET
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!