Zum Inhalt springen
TextArray1.87.0
100% lokal

CSS-Zeilenumbruch-Generator

Erstelle eine CSS-Regel, die Text nach einer bestimmten Zeilenanzahl mit Ellipse oder Ausblendung abschneidet.

Ausgabe
Verwandte Tools
CSS clamp()-GeneratorEntwickler-Tools
Text kürzenTextbearbeitung
CSS-Textschatten GeneratorneuEntwickler-Tools
i18n SchlüsseldiffEntwickler-Tools
TOML-zu-JSON-KonverterEntwickler-Tools
SQL zu JSONEntwickler-Tools
CSS-Zeilenumbruch-Generator
Kartentitel, Produktbeschreibungen und Kommentarvorschau brauchen irgendwann alle den gleichen Trick: mehrere Textzeilen anzeigen und den Rest sauber abschneiden, statt einen langen Absatz das Layout zu sprengen. Dieser Generator schreibt die CSS-Regel für Sie, fertig zum Einfügen in ein Stylesheet als ".line-clamp"-Klasse.
Wählen Sie den Einzeilenmodus für eine einfache Kürzung — die klassische Kombination "overflow: hidden; text-overflow: ellipsis; white-space: nowrap", die für Überschriften und Tabellenzellen verwendet wird — oder den Mehrzeilenmodus, der "-webkit-line-clamp" nutzt, um nach beliebig vielen Zeilen abzuschneiden und dabei die von Ihnen gewählte Zeilenhöhe berücksichtigt. Aktivieren Sie die Ausblendungsoption, um die letzte Zeile mit einem Farbverlauf in den Hintergrund auszublenden, statt einer harten Ellipse. Das sieht besser über einem Bild oder einer farbigen Karte aus. Die Fallback-Option fügt einen "@supports"-Block hinzu, damit Browser ohne Line-Clamp-Unterstützung immer noch eine vernünftige max-height-Begrenzung erhalten, statt einer ungeklippten Textwand. Die Tailwind-Option hängt die passende Utility-Klasse ("truncate" oder "line-clamp-N") als Kommentar an, damit Sie nicht danach suchen müssen.
Geben Sie einen Satz in das Vorschaufeld ein oder fügen Sie ihn ein, und das Tool zeigt, wie Ihr Text über die gewählte Zeilenanzahl verteilt würde. So können Sie die Zeilenanzahl überprüfen, bevor Sie sich auf ein Design festlegen. Die Schätzung basiert auf einer durchschnittlichen Lesezeilenlänge, nicht auf der Messung echter Schriftarten und Container — es ist ein Leitfaden für die Wahl einer vernünftigen Zeilenanzahl, kein pixelgenaues Rendering.
Alles läuft lokal in Ihrem Browser: Die CSS wird während der Eingabe generiert, nichts wird irgendwohin hochgeladen, und Sie können das Ergebnis kopieren, als .txt-Datei herunterladen oder direkt in die Eingabe eines anderen Tools schicken, um weiterzuarbeiten.
Häufige Fragen
Was ist der Unterschied zwischen einfacher und mehrfacher Zeilenkürzung?
Einzeiliges Abschneiden verwendet text-overflow: ellipsis mit white-space: nowrap und funktioniert in jedem Browser. Mehrzeiliges Abschneiden verwendet -webkit-line-clamp, um nach einer gewählten Zeilenanzahl abzuschneiden. Dafür ist die display: -webkit-box-Einrichtung erforderlich, die dieses Tool für Sie generiert.
Warum entfernt die Ausblendungsoption -webkit-line-clamp?
Ein Farbverlauf zum Ausblenden benötigt eine feste max-height und ein positioniertes Pseudo-Element, nicht das Line-Clamp-Box-Modell. Das Tool wechselt zu einer max-height-basierten Regel, wenn die Ausblendung aktiviert ist — für beide Einzel- und Mehrzeilenmodi.
Brauche ich die Fallback-Option immer noch für moderne Browser?
Alle aktuellen großen Browser unterstützen -webkit-line-clamp, daher schützt die Fallback hauptsächlich ältere oder ungewöhnliche Browser. Es ist harmlos, sie aktiviert zu lassen: Sie gilt nur inside einem "@supports not"-Block, den moderne Browser ignorieren.
Wie genau ist die Vorschau?
Es ist eine Schätzung basierend auf einer durchschnittlichen Zeilenlänge, keine Messung Ihrer tatsächlichen Schriftart oder Behälterbreite. Verwenden Sie sie, um zu beurteilen, ob Ihre gewählte Zeilenanzahl richtig aussieht, und überprüfen Sie dann das echte Ergebnis in Ihrer Seite.
Wird mein Vorschautext irgendwo hochgeladen?
Nein. Das CSS und die Vorschau werden vollständig in Ihrem Browser generiert — nichts, was Sie eingeben, wird an einen Server gesendet.