CSS / Troncare il testo su una o più righe con i puntini di sospensione

Per ridurre visivamente il testo lungo con CSS, usa text-overflow: ellipsis per una singola linea e le proprietà line-clamp per limitare più righe. CSS non elimina la stringa originale né restituisce un numero fisso di caratteri. Larghezza disponibile, ritorno a capo e overflow devono funzionare insieme affinché il troncamento sia visibile.

Distinguere il taglio visivo dalla modifica della stringa

Limitare un titolo a una riga o il riassunto di una scheda a tre righe differisce dall'utilizzare i primi 20 caratteri come dati. Usa il CSS per il limite visivo e JavaScript o l'elaborazione lato server per un'effettiva operazione sulla stringa. Il testo nascosto rimane nel documento, quindi il CSS non riduce la lunghezza originale dei dati né la dimensione del trasferimento.

Confrontare una e tre righe con un esempio completo

Salva il codice completo qui sotto come truncate.html in UTF-8 e aprilo in un browser. Non è necessaria alcuna libreria o server. La frase ripetuta rende il testo sufficientemente lungo e la scheda ha una larghezza massima di 24rem. Salva e ricarica dopo aver modificato, quindi confronta finestre più larghe e più strette.

<!DOCTYPE html>

<html lang="it">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<title>Confronto del testo su una e più righe</title>
<style>
    body { max-width: 42rem; margin: 0 auto; padding: 1rem; font-family: sans-serif; }
    h2 { font-size: 1.1rem; }
    .card { width: 100%; max-width: 24rem; }
    .frame { padding: 12px; border: 1px solid #777; margin-block: 1rem; }
    .sample { margin: 0; }
    .one { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .three { font-size: 16px; line-height: 1.6; max-height: 4.8em; overflow: hidden;
      display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
    .row { display: flex; align-items: center; gap: 12px; }
    .grow { flex: 1; min-width: 0; }
    .badge { flex: 0 0 auto; }
    .full { line-height: 1.6; overflow-wrap: anywhere; }
  </style>
</head>
<body>
<h1>Confronto del testo su una e più righe</h1>
<div class="card">
<h2>text-overflow: ellipsis</h2>
<div class="frame"><p class="sample one">Questo esempio mostra un titolo e un riepilogo lunghi in una scheda limitata. Anche quando parte del testo viene abbreviata visivamente, il contenuto completo è disponibile nella sezione espandibile sotto. Questo esempio mostra un titolo e un riepilogo lunghi in una scheda limitata. Anche quando parte del testo viene abbreviata visivamente, il contenuto completo è disponibile nella sezione espandibile sotto. Questo esempio mostra un titolo e un riepilogo lunghi in una scheda limitata. Anche quando parte del testo viene abbreviata visivamente, il contenuto completo è disponibile nella sezione espandibile sotto. Questo esempio mostra un titolo e un riepilogo lunghi in una scheda limitata. Anche quando parte del testo viene abbreviata visivamente, il contenuto completo è disponibile nella sezione espandibile sotto. </p></div>
<h2>-webkit-line-clamp: 3</h2>
<div class="frame"><p class="sample three">Questo esempio mostra un titolo e un riepilogo lunghi in una scheda limitata. Anche quando parte del testo viene abbreviata visivamente, il contenuto completo è disponibile nella sezione espandibile sotto. Questo esempio mostra un titolo e un riepilogo lunghi in una scheda limitata. Anche quando parte del testo viene abbreviata visivamente, il contenuto completo è disponibile nella sezione espandibile sotto. Questo esempio mostra un titolo e un riepilogo lunghi in una scheda limitata. Anche quando parte del testo viene abbreviata visivamente, il contenuto completo è disponibile nella sezione espandibile sotto. Questo esempio mostra un titolo e un riepilogo lunghi in una scheda limitata. Anche quando parte del testo viene abbreviata visivamente, il contenuto completo è disponibile nella sezione espandibile sotto. </p></div>
<h2>display: flex</h2>
<div class="frame row"><div class="grow"><p class="sample one">Questo esempio mostra un titolo e un riepilogo lunghi in una scheda limitata. Anche quando parte del testo viene abbreviata visivamente, il contenuto completo è disponibile nella sezione espandibile sotto. Questo esempio mostra un titolo e un riepilogo lunghi in una scheda limitata. Anche quando parte del testo viene abbreviata visivamente, il contenuto completo è disponibile nella sezione espandibile sotto. Questo esempio mostra un titolo e un riepilogo lunghi in una scheda limitata. Anche quando parte del testo viene abbreviata visivamente, il contenuto completo è disponibile nella sezione espandibile sotto. Questo esempio mostra un titolo e un riepilogo lunghi in una scheda limitata. Anche quando parte del testo viene abbreviata visivamente, il contenuto completo è disponibile nella sezione espandibile sotto. </p></div><span class="badge">A</span></div>
<details>
<summary>Leggi il testo completo</summary>
<p class="sample full">Questo esempio mostra un titolo e un riepilogo lunghi in una scheda limitata. Anche quando parte del testo viene abbreviata visivamente, il contenuto completo è disponibile nella sezione espandibile sotto. Questo esempio mostra un titolo e un riepilogo lunghi in una scheda limitata. Anche quando parte del testo viene abbreviata visivamente, il contenuto completo è disponibile nella sezione espandibile sotto. Questo esempio mostra un titolo e un riepilogo lunghi in una scheda limitata. Anche quando parte del testo viene abbreviata visivamente, il contenuto completo è disponibile nella sezione espandibile sotto. Questo esempio mostra un titolo e un riepilogo lunghi in una scheda limitata. Anche quando parte del testo viene abbreviata visivamente, il contenuto completo è disponibile nella sezione espandibile sotto. </p>
</details>
</div>
</body>
</html>

Aspettati il troncamento a una riga nella prima casella, al massimo tre righe nella seconda dove supportato, e il troncamento a una riga all'interno di Flexbox nella terza. Apri la sezione espandibile qui sotto per leggere il passaggio completo. Testi brevi potrebbero non raggiungere mai un limite e quindi non mostrare alcuna ellissi. Il ritorno a capo effettivo dipende dal font, dal contenuto e dalla larghezza disponibile.

Condizioni dei puntini di sospensione su una riga

Il troncamento su singola riga richiede che il testo superi lo spazio orizzontale disponibile. white-space: nowrap impedisce il ritorno a capo, overflow: hidden nasconde l'eccesso e text-overflow: ellipsis indica la fine troncata. Di seguito è riportata la regola completa dell'esempio .one.

.one {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

Impostare solo text-overflow non forza l'overflow né rende la scatola più stretta. Qui la larghezza è vincolata dalla card padre. Se una scatola continua a crescere con il suo contenuto, oppure il testo è sufficientemente breve, non appare l'ellissi. Gli elementi inline ordinari potrebbero non comportarsi come previsto; verifica la scatola di tipo block e il contesto effettivo del layout. Spiegazione MDN di text-overflow

Limitare più righe e prevedere un’altezza alternativa

Aggiungere text-overflow: ellipsis da solo non posiziona un'ellissi alla fine della terza riga. L'esempio combina le dichiarazioni di compatibilità legacy -webkit-line-clamp: 3, display: -webkit-box e -webkit-box-orient: vertical, insieme all'overflow nascosto. Di seguito è riportata la sua regola .three.

.three {
  font-size: 16px;
  line-height: 1.6;
  max-height: 4.8em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

Con font-size di 16px e line-height di 1,6 qui, una riga è alta 25,6px e tre righe occupano 76,8px, ovvero 4,8em. max-height: 4.8em limita l'altezza anche se il clamping non è disponibile. Un limite di altezza da solo non garantisce un'ellissi. Questo calcolo assume la dimensione del font e l'interlinea coerenti dell'esempio, senza padding o bordo separato sull'elemento di testo.

La proprietà di line-clamp senza prefisso ha un supporto browser variabile, quindi controlla la tabella di supporto e il rendering negli ambienti di destinazione. Applicala progressivamente con una query di funzionalità dove appropriato e verifica il supporto prima di sostituire le dichiarazioni di compatibilità. Per confrontare due righe, cambia sia il numero di clamp che l'altezza di fallback a 2 e 3.2em, poi ripristina i valori originali. MDN compatibilità e informazioni di supporto con line-clamp

Quando gli elementi non si riducono in Flexbox o Grid

La larghezza minima automatica di un elemento flessibile può mantenerlo legato alla dimensione del contenuto, prevenendo un restringimento sufficiente man mano che il suo genitore si restringe. L'esempio .grow fornisce sia flex: 1 che min-width: 0 così da poter restringersi. Applica il troncamento a .one, che contiene effettivamente il testo.

Rimuovi temporaneamente min-width di .grow negli strumenti di sviluppo, confronta il risultato e ripristina la proprietà. Questo non è un requisito universale per ogni elemento flessibile; ispeziona la dimensione minima reale e le condizioni di overflow. Per problemi di dimensione minima automatica della griglia, controlla la larghezza minima dell'elemento e considera una definizione di traccia flessibile come minmax(0, 1fr) quando opportuno. MDN spiegazione delle dimensioni minime automatiche in min-width

Fornire accesso al testo completo

Fornisci un modo per leggere il contenuto nascosto. Gli elementi details e summary dell'esempio sono elementi HTML nativi che funzionano con mouse, touch e tastiera senza JavaScript. Un'interfaccia reale può invece fornire un link alla pagina dettagliata o un altro chiaro controllo di espansione.

1. Non fare affidamento su un tooltip del mouse con attributo title come unico modo per leggere il contenuto completo. Anche gli utenti touch e tastiera devono avere accesso.
2. Il modo in cui il testo nascosto viene visualizzato quando copiato o letto da tecnologie assistive può variare. Verifica che il testo necessario rimanga leggibile e che il focus funzioni sul controllo di espansione.
3. Controlla gli schermi mobili, lo zoom e i font selezionati dall'utente. Non promettere un numero fisso di caratteri o parole ed evita di applicare il taglio a informazioni essenziali, pulsanti o campi di input.