Was ist die Line-Clamp-Eigenschaft von CSS? Wie benutzt man?

Der Inhalt dieses Artikels soll Ihnen vorstellen, was das Line-Clamp-Attribut von CSS ist. Wie benutzt man? Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Lassen Sie uns zunächst verstehen, was das Line-Clamp-Attribut ist.

Das line-clamp-Attribut kann die Anzahl der in einem Blockelement angezeigten Textzeilen begrenzen. Um diesen Effekt zu erzielen, muss es mit anderen fremden WebKit-Attributen kombiniert und mit dem - hinzugefügt werden. WebKit-Präfix.

Das Line-Clamp-Attribut ist eine nicht unterstützte WebKit-Eigenschaft. Es erscheint nicht in der CSS-Entwurfsspezifikation und ist ein Entwurf, der bearbeitet wird. Das bedeutet also, dass die Line-Clamp-Eigenschaft nicht in Stein gemeißelt ist, da sie noch in Arbeit ist. Die Definition des Line-Clamp-Attributs kann in Max-Lines und Block-Overflow unterteilt werden, wobei ersteres das Risiko birgt, verworfen zu werden. [Empfohlenes Lernvideo: CSS3-Tutorial]

Es ist leicht zu erkennen, wie Max-Lines deaktiviert ist, da die Funktion „Line-Clamp“ (Festlegen der Anzahl der Zeilen vor dem Abschneiden) deaktiviert wurde implementiert, wodurch weitere Kürzungen überflüssig werden. Das wird uns aus der Bahn bringen, also lasst uns weitermachen.

Als nächstes sehen wir uns an, wie das Attribut line-clamp verwendet wird.

Grundlegende Syntax

.module {
  line-clamp: [none | <integer>];
}

line-clamp Die folgenden Werte werden im aktuellen Entwurf der Spezifikation akzeptiert:

none: Es ist kein Maximum festgelegt Anzahl der Zeilen, daher erfolgt keine Kürzung.

: Legt die maximale Anzahl von Zeilen fest, bevor der Inhalt abgeschnitten wird, und zeigt dann am Ende der letzten Zeile ein Auslassungszeichen (...) an.

Die Auslassungspunkte sollten als Unicode-Zeichen (U+2026) gerendert werden, können aber durch ein Äquivalent basierend auf der Inhaltssprache und dem Schreibmodus des verwendeten Benutzeragenten ersetzt werden.

Dann könnte jemand fragen: Können wir nicht das Textüberlaufattribut (Textüberlauf) verwenden, um Text abzufangen?

text-overflow hat einen Wert, der den Text abschneidet: Auslassungspunkte, schauen wir uns den Effekt an

CSS-Code:

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

Es ist ersichtlich, dass der Textüberlauf Text abfangen kann, aber er führt in der ersten Zeile zu Ellipsen. Was ist, wenn wir irgendwo Text abfangen möchten, beispielsweise in der dritten Textzeile?

Hier kommt Line-Clamp ins Spiel.

Werfen wir einen Blick auf die Kompatibilität des Line-Clamp-Attributs

Für diejenigen, die dies nicht können. Mit unterstützten Browsern können wir JavaScript verwenden, um den Effekt zu erzielen.

JavaScript-Code, Download-Adresse von Clamp.js: https://github.com/josephschmitt/Clamp.js

Zusammenfassung: Das war's Artikel Der gesamte Inhalt des Artikels soll für das Studium aller hilfreich sein.

Das obige ist der detaillierte Inhalt vonWas ist die Line-Clamp-Eigenschaft von CSS? Wie benutzt man?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!