Hoppa till innehåll
TextArray1.87.0
100% lokalt

CSS-textförkortninggenerator

Skapa en CSS-regel som förkortar text efter ett visst antal rader, med prickar eller tonat slut.

Utmatning
Relaterade verktyg
CSS clamp()-generatorUtvecklarverktyg
Förkorta textTextmanipulation
CSS Text-Shadow GeneratornyUtvecklarverktyg
i18n nyckel diffUtvecklarverktyg
TOML till JSON-omvandlareUtvecklarverktyg
SQL till JSONUtvecklarverktyg
CSS-textförkortninggenerator
Korttitlar, produktbeskrivningar och kommentarförhandsvisningar behöver alla samma trick så småningom: visa ett par rader text och klipp av resten snyggt istället för att låta en lång stycke förstöra layouten. Den här generatorn skriver CSS-regeln åt dig, färdig att klistra in i ett stylesheet som en ".line-clamp"-klass.
Välj enradläge för enkel textförkortning — den klassiska kombinationen "overflow: hidden; text-overflow: ellipsis; white-space: nowrap" som används för titlar och tabellceller — eller flerlinjersläge, som använder "-webkit-line-clamp" för att klippa av efter hur många rader du väljer och respekterar den radhöjd du anger. Slå på toningsalternativet för att mjukt tona sista raden till bakgrunden med en gradient istället för ett hårt prickar-slut, vilket ser bättre ut över en bild eller ett färgat kort. Återgångsalternativet lägger till ett "@supports"-block så webbläsare utan line-clamp-stöd fortfarande får en vettig max-height-gräns istället för obegränsad text. Tailwind-alternativet lägger till motsvarande utility-klass ("truncate" eller "line-clamp-N") som kommentar så du inte behöver slå upp det.
Skriv eller klistra in en mening i förhandsgranskningsfältet och verktyget uppskattar hur din text skulle brytas över de valda raderna. På så sätt kan du sanity-check radantalet innan du fastslår dig för en design. Uppskattningen baseras på en genomsnittlig lä slängd, inte på att mäta verkliga typsnitt och behållare — det är en guide för att välja ett förnuftig radantal, inte en pixelperfekt rendering.
Allt körs lokalt i din webbläsare: CSS genereras när du skriver, ingenting laddas upp någonstans, och du kan kopiera resultatet, ladda ned det som en .txt-fil eller skicka det direkt till ett annat verktygs inmatning för att fortsätta arbeta.
FAQ
Vad är skillnaden mellan begränsning av en rad och flera rader?
Begränsning av en rad använder text-overflow: ellipsis med white-space: nowrap och fungerar i alla webbläsare. Begränsning av flera rader använder -webkit-line-clamp för att klippa av efter ett valt antal rader, vilket kräver display: -webkit-box-inställningen som det här verktyget genererar för dig.
Varför tar toningsalternativet bort -webkit-line-clamp?
En toningsgradient kräver en fast max-height och ett positionerat pseudo-element, inte line-clamp box-modellen. Verktyget byter till en max-height-baserad regel när toningen är aktiverad — för både en-rad och flerlinjersläge.
Behöver jag återgångsalternativet för moderna webbläsare?
Alla nuvarande stora webbläsare stöder -webkit-line-clamp, så återgången skyddar främst äldre eller ovanliga webbläsare. Det är ofarligt att lämna det på: det gäller endast i ett "@supports not"-block som moderna webbläsare ignorerar.
Hur korrekt är förhandsvisningen?
Det är en uppskattning baserad på en genomsnittlig radlängd, inte en mätning av ditt faktiska typsnitt eller behållarbredd. Använd det för att bedöma om ditt valda radantal känns rätt, och kontrollera sedan det verkliga resultatet på din sida.
Laddas min förhandsgranskningstext upp någonstans?
Nej. CSS och förhandsvisningen genereras helt i din webbläsare — ingenting du skriver skickas till en server.