CSS-Ellipsis-Generator
CSS zum ein- und mehrzeiligen Abschneiden von Text mit Auslassungspunkten – inklusive Live-Vorschau
Dieses Werkzeug erzeugt CSS, mit dem lange Texte sauber mit Auslassungspunkten (…) gekürzt werden. Unterstützt werden sowohl das einzeilige Abschneiden per text-overflow als auch das mehrzeilige Kürzen per -webkit-line-clamp. Nützlich für Entwickler und Designer, die Kartentitel, Listen oder Vorschautexte auf einer konstanten Höhe halten möchten. Die gesamte Verarbeitung findet im Browser statt, Ihr Text wird nicht an einen Server übertragen.
도구를 불러오는 중…
🔒 Alles läuft zu 100 % in Ihrem Browser. Ihre Dateien und Eingaben werden niemals auf einen Server hochgeladen.
Anleitung
- Wählen Sie die Art der Kürzung (einzeilig oder mehrzeilig).
- Legen Sie bei mehrzeiliger Kürzung die maximale Zeilenzahl über den Schieberegler fest.
- Verändern Sie die Containerbreite und prüfen Sie das Ergebnis in der Live-Vorschau.
- Kopieren Sie den erzeugten CSS-Code mit einem einzigen Klick.
FAQ
- Funktioniert -webkit-line-clamp in allen Browsern?
- Alle aktuellen Browser wie Chrome, Edge, Safari und Firefox unterstützen die Eigenschaft. Da sie ursprünglich aus der WebKit-Welt mit Herstellerpräfix stammt, sollten Sie für ältere Browser jedoch einen Fallback-Stil einplanen.
- Worin unterscheiden sich einzeilige und mehrzeilige Kürzung?
- Bei der einzeiligen Kürzung wird der Text über overflow, text-overflow und white-space auf eine Zeile begrenzt und abgeschnitten. Bei der mehrzeiligen Kürzung blendet -webkit-line-clamp alles aus, was über die festgelegte Zeilenzahl hinausgeht, und setzt Auslassungspunkte.
- Gibt es Fälle, in denen die mehrzeilige Kürzung (line-clamp) je nach Container nicht funktioniert?
- Ja, -webkit-line-clamp funktioniert nur korrekt in Kombination mit display: -webkit-box. Ist das Elternelement ein Flex- oder Grid-Container oder hat der Container keine klar definierte Breite, kann der Zeilenumbruch durcheinandergeraten und die Kürzung nicht richtig greifen. Am sichersten ist es, die display-Eigenschaft im generierten Code nicht eigenmächtig zu ändern.