Generatore di CSS line-clamp
Genera una regola CSS che tronca il testo dopo un numero definito di righe, con ellissi o sfumatura.
Generatore di CSS line-clamp
I titoli delle schede, le descrizioni dei prodotti e le anteprime dei commenti hanno tutti bisogno dello stesso trucco prima o poi: mostrare alcune righe di testo e tagliare il resto in modo pulito invece di lasciare che un lungo paragrafo rovini il layout. Questo generatore scrive quella regola CSS per te, pronta da incollare in un foglio di stile come classe ".line-clamp".
Scegli la modalità a una riga per un troncamento a una riga — la combinazione classica "overflow: hidden; text-overflow: ellipsis; white-space: nowrap" utilizzata per titoli e celle di tabella — o la modalità multi-riga, che utilizza "-webkit-line-clamp" per tagliare dopo il numero di righe che imposti, rispettando l'altezza della riga che scegli. Attiva l'opzione sfumatura per ammorbidire l'ultima riga verso lo sfondo con un gradiente invece di un'ellissi fissa, che si legge meglio su un'immagine o una scheda colorata. L'opzione di compatibilità aggiunge un blocco "@supports" in modo che i browser senza supporto line-clamp ricevano un ragionevole taglio max-height invece di un muro di testo non tagliato, e l'opzione Tailwind aggiunge la classe di utilità corrispondente ("truncate" o "line-clamp-N") come commento in modo da non doverla cercare.
Digita o incolla una frase nel campo di anteprima e lo strumento stima come il tuo testo si andrebbe a capo sul numero di righe scelto, in modo da poter verificare il numero di righe prima di impegnarti in un design. La stima si basa su una lunghezza media di riga di lettura piuttosto che sulla misurazione di caratteri e contenitori reali — è una guida per scegliere un numero di righe ragionevole, non un rendering pixel-perfect.
Tutto viene eseguito localmente nel tuo browser: il CSS viene generato mentre digiti, nulla viene caricato da nessuna parte, e puoi copiare il risultato, scaricarlo come file .txt o inviarlo direttamente all'input di un altro strumento per continuare a lavorarci.