CSS-Generator für Textkürzung mit Ellipsis & Line-Clamp
Fertigen CSS-Code für einzeilige Ellipsen oder mehrzeiliges Line-Clamping erzeugen
Erzeugt einsatzbereiten CSS-Code zum Abschneiden von Text — von der klassischen einzeiligen Ellipse bis zum mehrzeiligen Kürzen mit `-webkit-line-clamp`.
도구를 불러오는 중…
🔒 Alles läuft zu 100 % in Ihrem Browser. Ihre Dateien und Eingaben werden niemals auf einen Server hochgeladen.
Anleitung
- Mit dem Regler die gewünschte Zeilenzahl vor dem Abschneiden festlegen.
- Den erzeugten CSS-Code in dein Stylesheet kopieren.
FAQ
- Funktioniert das in jedem Browser?
- Ja — die inzwischen standardisierte Eigenschaft `-webkit-line-clamp` wird von allen gängigen aktuellen Browsern unterstützt.
- Unterscheidet sich der Code für eine Zeile von dem für mehrere Zeilen?
- Ja. Bei einer Zeile werden `text-overflow: ellipsis` und `white-space: nowrap` kombiniert, ab zwei Zeilen kommen `-webkit-line-clamp` zusammen mit `display: -webkit-box` zum Einsatz — das Tool wählt automatisch die passende Kombination.
- Kann ich den vollständigen Text beim Hovern anzeigen?
- Mit CSS allein nicht. Ergänze ein `title`-Attribut oder ein kleines Tooltip-Skript, um den vollständigen Text beim Überfahren mit der Maus anzuzeigen.