So beschränken Sie Text in Tailwind auf eine bestimmte Anzahl von Zeilen

In diesem Artikel wird das Verfahren zum Festklemmen des Textes in einem Tailwind beschrieben.

Wie klemme ich Text auf eine bestimmte Anzahl von Zeilen?

Die Zeilenklemmklasse in Tailwind begrenzt den Textinhalt in einem Block auf eine bestimmte Anzahl von Zeilen. Dadurch verbirgt der Textblock den Text nach der in der Klasse angegebenen Anzahl von Zeilen. Es kann auf einer Webseite verwendet werden, um dem Benutzer anzuzeigen, dass Textinformationen vorhanden sind, oder um den gesamten unnötigen Text auszublenden, um eine Sättigung der Webseite zu vermeiden.

Syntax

Die unten angegebene Syntax wird im Abschnitt „ Klasse Attribut eines Elements zum Anwenden der Zeilenklemmung:

In der oben definierten Syntax kann der Benutzer die Zahlen aus „ 1 bis 6 ” für die Verwendung der Standard-Linienklemmklassen. Zum Beispiel das „ Leitungsklemme-1 Die Klasse „lässt nicht zu, dass der Textinhalt eine Zeile überschreitet.

Lassen Sie uns das Konzept der „Line-Camp“-Klasse anhand einiger Beispiele verstehen.

Beispiel 1: Verwenden Sie die Line-Clamp-Klasse, um den Inhalt auf eine bestimmte Anzahl von Zeilen zu beschränken

Beschränken wir den Textinhalt mithilfe der Line-Clamping-Klasse in Tailwind wie folgt auf drei Zeilen:

Die Erklärung des obigen Codes lautet wie folgt:

• A ' div ”-Element wird mit abgerundeten Ecken erstellt mit der Funktion „ abgerundet-lg ' Klasse. Es stellt den Rand und die Polsterung mithilfe der „ m-{Anzahl} ” & „ p-{Zahl} ' Klassen.
• Als nächstes wird das Element im div-Element mithilfe des „ justify-center ”-Klasse und die „ biegen Die Klasse erstellt einen Container, der das untergeordnete Element des div enthält.
• Der ' bg-{color}-{number} Die Klasse „ legt die Hintergrundfarbe des div-Elements fest.
• A '

  Es wird ein Tag erstellt, der den Textinhalt enthält. Es wird eine feste Breite mit dem „ w-{Nummer} ' Klasse.

• Abschließend ist der Textinhalt des „ P Das Element ist mit dem „“ auf drei Zeilen beschränkt. Leitungsklemme-3 ' Klasse.

Ausgabe

In der Ausgabe ist zu erkennen, dass der Textinhalt, der die angegebene Grenze von drei Zeilen überschreitet, ausgeblendet wird:

Beispiel 2: Verwenden Sie die Line-Clamp-Klasse mit Standardzuständen in Tailwind

Tailwind stellt verschiedene Standardzustände für ein Element bereit, mit denen die Design-Layouts dynamischer gestaltet werden können. Der Entwickler kann jede Tailwind-Klasse mit diesen Zuständen verwenden, um dem Element die angegebene Designeigenschaft bereitzustellen, wann immer dieser Zustand erreicht wird. Ebenso kann die „Line-Clamp“-Klasse auch mit diesen Standard-Tailwind-Zuständen verwendet werden.

Die Syntax für die Verwendung der „line-clamp“-Klasse mit einem Zustand in Tailwind ist unten angegeben:

Es gibt drei Standardzustände, die wie folgt beschrieben werden:

• schweben: Es ist der Zustand eines Elements, wenn der Benutzer mit der Maus darüber fährt.
• Fokus: Dies ist der Zustand, in dem das Element im Fokus ist. Beispielsweise navigiert der Benutzer zu dem Element, indem er die „Tab“-Taste drückt.
• aktiv: Der Zustand, wenn das Element vom Benutzer aktiviert wird.

In der folgenden Demonstration ist alles identisch mit dem vorherigen Beispiel. Der einzige Unterschied besteht darin, dass die Line-Clamping-Klasse mit dem „ schweben ' Zustand:

Notiere dass der '

Die Klasse wird bereitgestellt von der Klasse „ hover:line-clamp-3 ”-Klasse, die den Textinhalt auf drei Zeilen beschränkt, wenn der Benutzer den Mauszeiger über das Inhaltsfeld bewegt.

Ausgabe

In der folgenden Ausgabe ist zu sehen, dass die Eigenschaft „Zeilenklemmen“ angewendet wird, wenn sich der Mauszeiger über dem Block befindet:

Beispiel 3: Verwenden Sie die Line-Clamp-Klasse mit Haltepunkten

Haltepunkte sind Medienabfragen in Tailwind, die Benutzern helfen, ein responsives Design-Layout zu erstellen. Tailwind bietet fünf Standard-Haltepunkte mit vordefinierten Mindestbreiten. Der Entwickler kann mit diesen Haltepunkten auch die Line-Clamping-Klasse verwenden.

Die Syntax für die Verwendung einer Line-Clamping-Klasse mit Haltepunkten lautet wie folgt:

Die in der obigen Syntax erwähnten „Haltepunktpräfixe“ lauten wie folgt:

• sm: Dieser Haltepunkt hat eine Mindestbreite von 640 Pixel.
• md: Dieser Haltepunkt hat eine Mindestbreite von 768 Pixel.
• lg: Dieser Haltepunkt hat eine Mindestbreite von 1024 Pixel.
• XL: Dieser Haltepunkt hat eine Mindestbreite von 1280 Pixel.
• 2xl: Dieser Haltepunkt hat eine Mindestbreite von 1536 Pixel.

In der unten bereitgestellten Demonstration wird das „ P Das Element verfügt über unterschiedliche Leitungsklemmenklassen an unterschiedlichen Haltepunkten. Dadurch wird die Zeilenklemmungseigenschaft des Textblocks immer dann geändert, wenn der neue Haltepunkt erreicht wird:

Das p-Element ist standardmäßig mit der Klasse „line-clamp-1“ ausgestattet. Allerdings ist der Textinhalt im „p“-Element auf eine Zeile für das „p“-Element beschränkt. sm ” Haltepunkt, zwei Zeilen für das „ md ”-Haltepunkt und drei Zeilen für den „ lg ” Haltepunkt.

Ausgabe

Aus der Ausgabe geht klar hervor, dass sich die Zeilenklemmeneigenschaft des Textblocks ändert, wenn sich die Bildschirmgröße ändert:

Wir haben das Verfahren zum Begrenzen von Text auf eine bestimmte Anzahl von Zeilen in Tailwind demonstriert.

Abschluss

Die Line-Clamp-Klasse in Tailwind begrenzt den Textinhalt eines Elements auf die angegebene Anzahl von Zeilen. Die Klasse „lin-clamp-{number}“ wird als Syntax zum Festklemmen des Textes auf begrenzte Zeilen verwendet. Die Line-Clamp-Klasse kann mit den vordefinierten Haltepunkten und den Zustandsvarianten in Tailwind verwendet werden. In diesem Artikel wird das Verfahren zum Begrenzen des Textes auf eine bestimmte Anzahl von Zeilen beschrieben.