CSS / Text kürzen: Ellipsen für eine und mehrere Zeilen

Um langen Text visuell mit CSS zu kürzen, verwenden Sie text-overflow: ellipsis für eine einzelne Zeile und line-clamp-Eigenschaften, um mehrere Zeilen zu begrenzen. CSS löscht weder die ursprüngliche Zeichenfolge noch gibt es eine feste Anzahl von Zeichen zurück. Verfügbare Breite, Umbruch und Überlauf müssen zusammenarbeiten, damit die Kürzung sichtbar wird.

Anzeige kürzen und Zeichenketten ändern unterscheiden

Die Begrenzung eines Titels auf eine Zeile oder einer Karten-Zusammenfassung auf drei Zeilen unterscheidet sich davon, die ersten 20 Zeichen als Daten zu verwenden. Verwenden Sie CSS für das visuelle Limit und JavaScript oder serverseitige Verarbeitung für eine tatsächliche Zeichenkettenoperation. Versteckter Text bleibt im Dokument, daher reduziert CSS weder die ursprüngliche Datenlänge noch die Übertragungsgröße.

Eine und drei Zeilen am vollständigen Beispiel vergleichen

Speichern Sie den vollständigen Code unten als truncate.html in UTF-8 und öffnen Sie ihn im Browser. Es wird keine Bibliothek oder Server benötigt. Der wiederholte Satz macht den Text ausreichend lang, und die Karte hat eine maximale Breite von 24rem. Speichern und neu laden nach der Bearbeitung, dann vergleichen Sie breitere und schmalere Fenster.

<!DOCTYPE html>

<html lang="de">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<title>Einzeiligen und mehrzeiligen Text vergleichen</title>
<style>
    body { max-width: 42rem; margin: 0 auto; padding: 1rem; font-family: sans-serif; }
    h2 { font-size: 1.1rem; }
    .card { width: 100%; max-width: 24rem; }
    .frame { padding: 12px; border: 1px solid #777; margin-block: 1rem; }
    .sample { margin: 0; }
    .one { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .three { font-size: 16px; line-height: 1.6; max-height: 4.8em; overflow: hidden;
      display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
    .row { display: flex; align-items: center; gap: 12px; }
    .grow { flex: 1; min-width: 0; }
    .badge { flex: 0 0 auto; }
    .full { line-height: 1.6; overflow-wrap: anywhere; }
  </style>
</head>
<body>
<h1>Einzeiligen und mehrzeiligen Text vergleichen</h1>
<div class="card">
<h2>text-overflow: ellipsis</h2>
<div class="frame"><p class="sample one">Dieses Beispiel zeigt einen langen Titel und eine Zusammenfassung in einer begrenzten Karte. Auch wenn Text verkürzt erscheint, steht der vollständige Inhalt im aufklappbaren Bereich unten. Dieses Beispiel zeigt einen langen Titel und eine Zusammenfassung in einer begrenzten Karte. Auch wenn Text verkürzt erscheint, steht der vollständige Inhalt im aufklappbaren Bereich unten. Dieses Beispiel zeigt einen langen Titel und eine Zusammenfassung in einer begrenzten Karte. Auch wenn Text verkürzt erscheint, steht der vollständige Inhalt im aufklappbaren Bereich unten. Dieses Beispiel zeigt einen langen Titel und eine Zusammenfassung in einer begrenzten Karte. Auch wenn Text verkürzt erscheint, steht der vollständige Inhalt im aufklappbaren Bereich unten. </p></div>
<h2>-webkit-line-clamp: 3</h2>
<div class="frame"><p class="sample three">Dieses Beispiel zeigt einen langen Titel und eine Zusammenfassung in einer begrenzten Karte. Auch wenn Text verkürzt erscheint, steht der vollständige Inhalt im aufklappbaren Bereich unten. Dieses Beispiel zeigt einen langen Titel und eine Zusammenfassung in einer begrenzten Karte. Auch wenn Text verkürzt erscheint, steht der vollständige Inhalt im aufklappbaren Bereich unten. Dieses Beispiel zeigt einen langen Titel und eine Zusammenfassung in einer begrenzten Karte. Auch wenn Text verkürzt erscheint, steht der vollständige Inhalt im aufklappbaren Bereich unten. Dieses Beispiel zeigt einen langen Titel und eine Zusammenfassung in einer begrenzten Karte. Auch wenn Text verkürzt erscheint, steht der vollständige Inhalt im aufklappbaren Bereich unten. </p></div>
<h2>display: flex</h2>
<div class="frame row"><div class="grow"><p class="sample one">Dieses Beispiel zeigt einen langen Titel und eine Zusammenfassung in einer begrenzten Karte. Auch wenn Text verkürzt erscheint, steht der vollständige Inhalt im aufklappbaren Bereich unten. Dieses Beispiel zeigt einen langen Titel und eine Zusammenfassung in einer begrenzten Karte. Auch wenn Text verkürzt erscheint, steht der vollständige Inhalt im aufklappbaren Bereich unten. Dieses Beispiel zeigt einen langen Titel und eine Zusammenfassung in einer begrenzten Karte. Auch wenn Text verkürzt erscheint, steht der vollständige Inhalt im aufklappbaren Bereich unten. Dieses Beispiel zeigt einen langen Titel und eine Zusammenfassung in einer begrenzten Karte. Auch wenn Text verkürzt erscheint, steht der vollständige Inhalt im aufklappbaren Bereich unten. </p></div><span class="badge">A</span></div>
<details>
<summary>Vollständigen Text lesen</summary>
<p class="sample full">Dieses Beispiel zeigt einen langen Titel und eine Zusammenfassung in einer begrenzten Karte. Auch wenn Text verkürzt erscheint, steht der vollständige Inhalt im aufklappbaren Bereich unten. Dieses Beispiel zeigt einen langen Titel und eine Zusammenfassung in einer begrenzten Karte. Auch wenn Text verkürzt erscheint, steht der vollständige Inhalt im aufklappbaren Bereich unten. Dieses Beispiel zeigt einen langen Titel und eine Zusammenfassung in einer begrenzten Karte. Auch wenn Text verkürzt erscheint, steht der vollständige Inhalt im aufklappbaren Bereich unten. Dieses Beispiel zeigt einen langen Titel und eine Zusammenfassung in einer begrenzten Karte. Auch wenn Text verkürzt erscheint, steht der vollständige Inhalt im aufklappbaren Bereich unten. </p>
</details>
</div>
</body>
</html>

Erwarten Sie eine einzeilige Kürzung in der ersten Box, höchstens drei Zeilen in der zweiten, wo unterstützt, und eine einzeilige Kürzung innerhalb von Flexbox in der dritten. Öffnen Sie den erweiterbaren Abschnitt unten, um den vollständigen Text zu lesen. Kurzer Text erreicht möglicherweise nie ein Limit und zeigt daher kein Auslassungszeichen. Das tatsächliche Umbruchverhalten hängt von Schriftart, Inhalt und verfügbarer Breite ab.

Voraussetzungen für einzeilige Auslassungspunkte

Einzeilige Kürzung erfordert, dass der Text über seinen horizontalen Raum hinausgeht. white-space: nowrap verhindert Zeilenumbruch, overflow: hidden versteckt den überflüssigen Text und text-overflow: ellipsis markiert das abgeschnittene Ende. Folgendes ist die vollständige .one-Regel des Beispiels.

.one {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

Allein das Setzen von text-overflow erzwingt weder Überlauf noch macht die Box schmaler. Die übergeordnete Karte begrenzt hier die Breite. Wenn eine Box mit ihrem Inhalt weiter wächst oder der Text kurz genug ist, erscheint kein Auslassungszeichen. Gewöhnliche Inline-Elemente verhalten sich möglicherweise nicht wie erwartet; prüfen Sie die Blockbox und den tatsächlichen Layoutkontext. MDN-Erklärung zu text-overflow

Mehrzeilige Begrenzung und höhenbasierter Ersatz

Das Hinzufügen von text-overflow: ellipsis allein setzt kein Auslassungszeichen am Ende der dritten Zeile. Das Beispiel kombiniert die Legacy-Kompatibilitätsdeklarationen -webkit-line-clamp: 3, display: -webkit-box und -webkit-box-orient: vertical zusammen mit verborgenem Überlauf. Folgendes ist seine .three-Regel.

.three {
  font-size: 16px;
  line-height: 1.6;
  max-height: 4.8em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

Bei einer Schriftgröße von 16 px und einem Zeilenabstand von 1,6 ist hier eine Zeile 25,6 px hoch und drei Zeilen nehmen 76,8 px oder 4,8 em ein. max-height: 4.8em begrenzt die Höhe, selbst wenn das Clampen nicht verfügbar ist. Eine reine Höhenbegrenzung garantiert kein Auslassungszeichen. Diese Berechnung geht von der konsistenten Schriftgröße und dem Zeilenabstand des Beispiels aus, ohne separates Padding oder Rahmen am Textelement.

Die präfixlose line-clamp-Eigenschaft hat eine unterschiedliche Browserunterstützung, daher überprüfen Sie die Unterstützungstabelle und das Rendering in Ihren Zielumgebungen. Wenden Sie sie progressiv mit einer Feature-Abfrage an, wo dies angebracht ist, und prüfen Sie die Unterstützung, bevor Sie die Kompatibilitätsdeklarationen ersetzen. Um zwei Zeilen zu vergleichen, ändern Sie sowohl die Anzahl der Clamp-Vorgaben als auch die Ersatzhöhe auf 2 bzw. 3,2em und stellen Sie dann die ursprünglichen Werte wieder her. MDN Informationen zur Kompatibilität und Unterstützung von Line-Clamp

Wenn Elemente in Flexbox oder Grid nicht schrumpfen

Die automatische Mindestbreite eines Flex-Elements kann dazu führen, dass es an seine Inhaltsgröße gebunden bleibt und nicht genug schrumpft, wenn das übergeordnete Element sich verengt. Das Beispiel gibt .grow sowohl flex: 1 als auch min-width: 0, damit es schrumpfen kann. Wenden Sie die Abschneidung auf .one an, das tatsächlich den Text enthält.

Entfernen Sie vorübergehend die min-width von .grow in den Entwicklertools, vergleichen Sie sie und stellen Sie sie wieder her. Dies ist keine universelle Anforderung für jedes Flex-Element; überprüfen Sie die tatsächliche Mindestgröße und die Überlaufbedingungen. Bei automatischen Mindestgrößenproblemen im Grid prüfen Sie die min-width des Elements und ziehen Sie gegebenenfalls eine flexible Track-Definition wie minmax(0, 1fr) in Betracht. MDN Erklärung der automatischen Mindestgrößen in min-width

Vollständigen Text und Zugänglichkeit bereitstellen

Bieten Sie eine Möglichkeit, den versteckten Inhalt zu lesen. Die Elemente details und summary im Beispiel sind native HTML-Elemente, die ohne JavaScript mit Maus, Touch und Tastatur funktionieren. Eine echte Oberfläche kann stattdessen einen Detailseiten-Link oder eine andere klare Erweiterungssteuerung bereitstellen.

1. Verlassen Sie sich nicht nur auf einen Maus-Tooltip des title-Attributs, um den vollständigen Inhalt zu lesen. Auch Touch- und Tastaturnutzer müssen Zugriff haben.
2. Wie versteckter Text beim Kopieren oder beim Lesen durch unterstützende Technologien angezeigt wird, kann variieren. Überprüfen Sie, dass notwendiger Text weiterhin lesbar ist und dass der Fokus auf der Erweiterungsschaltfläche funktioniert.
3. Überprüfen Sie mobile Bildschirme, Zoom und vom Benutzer ausgewählte Schriftarten. Versprechen Sie keine feste Zeichen- oder Wortanzahl und vermeiden Sie es, wichtige Informationen, Schaltflächen oder Eingabefelder abzuschneiden.