CSS-Textkürzung-Generator
CSS-Code für ein- oder mehrzeilige Textkürzung mit Live-Vorschau erzeugen
도구를 불러오는 중…
🔒 Alles läuft zu 100 % in Ihrem Browser. Ihre Dateien und Eingaben werden niemals auf einen Server hochgeladen.
Dieses Tool erzeugt fertigen CSS-Code, um lange Texte sauber mit Ellipsis (…) abzuschneiden – wahlweise einzeilig mit text-overflow oder mehrzeilig mit -webkit-line-clamp. Praktisch für Entwickler und Designer, die Karten, Listen oder Vorschautexte auf eine feste Höhe begrenzen möchten. Alles läuft direkt im Browser, es wird nichts an einen Server gesendet.
Anleitung
- Kürzungstyp wählen: einzeilig oder mehrzeilig
- Bei mehrzeilig die maximale Zeilenzahl per Schieberegler einstellen
- Containerbreite anpassen und die Live-Vorschau prüfen
- Erzeugten CSS-Code mit einem Klick kopieren
FAQ
- Funktioniert -webkit-line-clamp in allen Browsern?
- Es wird von allen modernen Browsern (Chrome, Edge, Safari, Firefox) unterstützt, war ursprünglich aber ein WebKit-Präfix-Feature – für ältere Browser ist ein Fallback sinnvoll.
- Was ist der Unterschied zwischen ein- und mehrzeiliger Kürzung?
- Einzeilig nutzt overflow, text-overflow und white-space, um Text in einer Zeile abzuschneiden, während mehrzeilig mit -webkit-line-clamp den Text auf eine festgelegte Zeilenzahl begrenzt und dann Ellipsis anfügt.