So begrenzen Sie Textzeilen nur mit CSS

Die Begrenzung der Textmenge in einem Element ist eine häufige Webdesign-Anforderung. Oft sehen Sie einen Artikel mit einem drei- oder vierzeiligen Auszug und einer Schaltfläche, mit der Sie den Volltext erweitern können.

Sie können dieses Design mit einer Kombination aus CSS und JavaScript erstellen. Sie können dies aber auch allein mit CSS tun. Entdecken Sie zwei Möglichkeiten, den Text in einem Feld einzuschränken, und wie Sie mit nur CSS eine dynamische Erweiterungsschaltfläche erstellen können.

Die Webkit-Technik

Erstellen Sie einen leeren Ordner und bearbeiten Sie zwei Dateien darin: index.html Und style.css. Im Inneren index.html Datei, erstellen Sie ein HTML-Gerüst:

html>
<htmllang=„en“>
<Kopf>
<Titel>DokumentierenTitel>
<Verknüpfungrel=„Stylesheet“href=„style.css“>
Kopf>
<Körper>
Körper>
html>

Ein Link in der Abschnitt, zum style.css stellt sicher, dass alle CSS, die Sie dieser Datei hinzufügen, auf diese Seite angewendet werden. Fügen Sie als Nächstes das folgende HTML-Markup in das ein Tags ein

index.html:

<AbschnittKlasse=„Kartengruppe“>
<ArtikelKlasse="Karte">
<h2>Artikel 1h2>
<PKlasse=„Cuttoff-Text“>
 Hier kommt ein Text mit 300 Wörtern hinein
P>
<EingangTyp=„Kontrollkästchen“Klasse=„expand-btn“>
Artikel>
<ArtikelKlasse="Karte">
<h2>Artikel 2h2>
<PKlasse=„Cuttoff-Text“>
 Hier kommt ein Text mit 200 Wörtern hinein
P>
<EingangTyp=„Kontrollkästchen“Klasse=„expand-btn“>
Artikel>
<ArtikelKlasse="Karte">
<h2>Artikel 1h2>
<PKlasse=„Cuttoff-Text“>
 Hier kommt ein Text mit 100 Wörtern hinein
P>
<EingangTyp=„Kontrollkästchen“Klasse=„expand-btn“>
Artikel>
Abschnitt>

Die Struktur dieses HTML ist einfach, aber dennoch nützlich Semantisches Markup für Barrierefreiheit. Ein Abschnittselement enthält drei Artikelelemente. Jeder Artikel besteht aus einer Überschrift, einem Absatz und einem Eingabeelement. Sie verwenden CSS, um jeden Artikelabschnitt in eine Karte umzuwandeln.

In der Zwischenzeit sieht Ihre Seite so aus:

Auf dem Bild oben können Sie unterschiedliche Textlängen in jedem Absatz erkennen. 300 Wörter im ersten, 200 Wörter im zweiten und 100 im dritten.

Der nächste Schritt besteht darin, mit der Gestaltung der Seite zu beginnen, indem Sie CSS hinzufügen style.css Datei. Beginnen Sie damit, den Rand des Dokuments zurückzusetzen und dem Textkörper eine weiße Hintergrundfarbe zu geben:

*, *::Vor, *::nach {
Kartongröße: Grenzfeld;
}
Körper {
Hintergrund: #f3f3f3;
Überlauf: versteckt;
}

Als nächstes verwandeln Sie das Element mit der Klasse „card-group“ in einen Gittercontainer mit drei Spalten. Jeder Artikelabschnitt belegt eine Spalte:

.kartengruppe {
Anzeige: Netz;
Rastervorlagenspalten: wiederholen(3, 1Fr);
Lücke: .5rem;
align-items: Flex-Start;
}

Gestalten Sie jeden Artikelabschnitt als Karte mit weißer Hintergrundfarbe und einem schwarzen, leicht runden Rand:

.Karte {
Hintergrund: Weiss;
Polsterung: 1rem;
Grenze: 1pxsolideSchwarz;
Grenzradius: .25em;
}

Fügen Sie abschließend einige Ränder hinzu:

h2, P {
Rand: 0;
}
h2 {
Rand unten: 1rem;
}

Speichern Sie die Datei und überprüfen Sie Ihren Browser. Die Seite sollte wie im Bild unten gezeigt aussehen:

Der nächste Schritt besteht darin, die Anzahl der Zeilen für jeden Text auf 3 zu reduzieren. Hier ist das CSS dafür:

.cuttoff-text {
--maximale Anzahl an Zeilen: 3; 
Überlauf: versteckt;

Anzeige: -Webkit-Box; 
-webkit-box-orient: Vertikale;
-webkit-line-clamp: var(--maximale Anzahl an Zeilen);
}

Beginnen Sie mit der Einstellung eine CSS-Variable, max-lines, auf 3 und Ausblenden von überlaufendem Inhalt. Stellen Sie dann die Anzeige auf -Webkit-Box und klemmen Sie die Leitung an 3 fest.

Das folgende Bild zeigt das Ergebnis. Auf jeder Karte wird in der dritten Textzeile eine Ellipse angezeigt:

Diese Technik kann ziemlich schwierig umzusetzen sein. Wenn Sie irgendein Eigentum weglassen würden, würde alles kaputt gehen. Ein weiterer Nachteil besteht darin, dass Sie keine andere Anzeigeeigenschaft als verwenden können --webkit-box. Beispielsweise möchten Sie vielleicht Verwenden Sie Grid oder Flexbox. Aus diesen Gründen ist die folgende Technik besser.

Ein flexiblerer Ansatz zur Begrenzung der Zeilenanzahl im Text

Mit dieser Technik können Sie das Gleiche tun wie mit dem Webkit-Ansatz, jedoch mit den gleichen Ergebnissen. Der große Unterschied besteht jedoch darin, dass Sie sehr flexibel sind, da Sie die Höhe selbst festlegen. Außerdem können Sie jede beliebige Anzeigeeigenschaft oder jede beliebige Stiloption verwenden, die Sie bevorzugen.

Ersetzen Sie zunächst den CSS-Block durch .cutoff-text mit diesem:

.cuttoff-text {
--maximale Anzahl an Zeilen: 5;
--Zeilenhöhe: 1.4;
Höhe: kalk(var(--maximale Anzahl an Zeilen) * 1em * var(--Zeilenhöhe));
Zeilenhöhe: var(--Zeilenhöhe);
Position: relativ;
}

Das Festlegen einer Linienhöhe ist wichtig, da Sie diese bei der Bestimmung Ihrer Höhe berücksichtigen müssen. Um die Höhe zu erhalten, multiplizieren Sie die Zeilenhöhe mit Ihrer Schriftgröße und der Anzahl der Zeilen.

Wir fügen hinzu Position: relativ Eigenschaft, weil wir sie brauchen, um den Fade-Effekt hinzuzufügen. Fügen Sie das folgende CSS hinzu, um den Effekt zu vervollständigen:

.cuttoff-text::Vor {
Inhalt: "";
Position: absolut;
Höhe: kalk(2em * var(--Zeilenhöhe));
Breite: 100%;
Unterseite: 0;
Zeigerereignisse: keiner;
Hintergrund: linearer Gradient(ZuUnterseite, transparent, Weiss);
}

Das obige CSS verwischt die letzte Textzeile auf jeder Karte. Mit dem können Sie einen Fading-Effekt erzielen Hintergrund Eigenschaft und ein Gefälle. Sie müssen festlegen Zeigerereignisse Zu keiner um sicherzustellen, dass das Element nicht auswählbar ist.

Hier ist das Ergebnis:

Diese Technik erzielte das gleiche Ergebnis wie die vorherige (plus die Unschärfe am Ende). Sie erhalten jedoch mehr Flexibilität bei der Verwendung anderer Arten von Layouts und Designs.

Hinzufügen einer dynamischen Schaltfläche zum Erweitern und Reduzieren

Durch das Hinzufügen einer Schaltfläche zum Erweitern/Reduzieren werden die Karten realistischer und interaktiver. Bei diesem Muster erweitern Sie den Inhalt, indem Sie auf klicken Expandieren Klicken Sie auf die Schaltfläche, woraufhin sich der Text in ändert Zusammenbruch. Der Text der Schaltfläche wechselt also zwischen „Erweitern“ und „Reduzieren“, wenn Sie darauf klicken. Darüber hinaus wird der Rest des Inhalts im jeweiligen Status angezeigt und ausgeblendet.

Sie haben bereits eine definiert Eingang Element in Ihrem HTML. Dieses Element dient als Ihre Schaltfläche. Um diese Eingabe in eine Schaltfläche umzuwandeln, fügen Sie das folgende CSS in Ihr Stylesheet ein:

.expand-btn {
Aussehen: keiner;
Grenze: 1pxsolideSchwarz;
Polsterung: .5em;
Grenzradius: .25em;
Mauszeiger: Zeiger;
Rand oben: 1rem;
}

Wenn Sie mit der Maus über die Schaltfläche fahren, möchten Sie die Hintergrundfarbe ändern:

.expand-btn:schweben {
Hintergrundfarbe: #ccc;
}

Nun das CSS zum Umschalten des Textes, wenn die Eingabe überprüft wird:

.expand-btn::Vor {
Inhalt: "Expandieren"
}
.expand-btn:überprüft::Vor {
Inhalt: "Zusammenbruch"
}

Wenn Sie nun auf die Schaltfläche/Eingabe klicken, wird der Text angezeigt Expandieren Zu Zusammenbruch. Aber der Inhalt selbst wird noch nicht erweitert. Damit dies geschieht, wenn Sie auf die Schaltfläche klicken, fügen Sie das folgende CSS hinzu:

.cuttoff-text:hat(+.expand-btn:geprüft) {
Höhe: Auto;
}

Dieses Beispiel verwendet has() CSS-Selektor zum Targeting des Elements. Mit diesem Code sagen Sie, dass die Höhe der Karte sein sollte, wenn der abgeschnittene Textbereich über eine aktivierte Schaltfläche zum Erweitern verfügt Auto (was es erweitert).

Hier ist das Ergebnis:

Weitere CSS-Tipps und Tricks zum Lernen

In diesem Artikel wurden zwei verschiedene Methoden zur Begrenzung der Zeilenanzahl in einem Feld mithilfe von CSS vorgestellt. Wir haben sogar eine Schaltfläche zum Erweitern/Reduzieren des Inhalts hinzugefügt, ohne eine einzige Zeile JavaScript zu schreiben.

Aber es gibt noch jede Menge weitere Tipps und Tricks in CSS. Diese Tipps bieten Ihnen eine kreative Möglichkeit, Ihre gewünschten Layouts zu erreichen, ohne die Leistung, Lesbarkeit oder Zugänglichkeit zu beeinträchtigen.