So implementieren Sie mehrzeilige Ellipsen in CSS

So implementieren Sie mehrzeilige Ellipsen in CSS: 1. [-webkit-box] zeigt das Objekt als flexibles Boxmodell an. 2. [webkit-box-orient] legt die Anordnung der untergeordneten Elemente des flexiblen fest Box-Objekt.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3-Version, DELL G3-Computer.

So implementieren Sie mehrzeilige Auslassungspunkte in CSS:

Übersicht:

webkit-line-clamp ist eine nicht unterstützte WebKit-Eigenschaft, die im Entwurf der CSS-Spezifikation nicht enthalten ist.

Begrenzen Sie die Anzahl der in einem Blockelement angezeigten Textzeilen. Um diesen Effekt zu erzielen, muss es mit anderen fremden WebKit-Eigenschaften kombiniert werden. Häufig kombinierte Attribute:

• display: -webkit-box muss kombiniert werden, um das Objekt als flexibles Boxmodell anzuzeigen.

• -webkit-box-orient muss mit dem Attribut kombiniert werden, um die Anordnung der untergeordneten Elemente des Flex-Box-Objekts festzulegen oder abzurufen.

• text-overflow kann verwendet werden, um bei mehrzeiligem Text Text außerhalb des zulässigen Bereichs mit den Auslassungspunkten „…“ auszublenden.

Syntax:

-webkit-line-clamp：<number>

• Standardwert: ?

  Animation: Nein

• Berechneter Wert : Der angegebene Wert
Wert:

• d80b5def5ed1be6e26d91c2709f14170:
• Die Anzahl der vom Blockelement angezeigten Textzeilen.
  * Es kann zu Beschreibungsfehlern und Änderungen in den neuen Attributen von CSS3 kommen. Sie dienen nur als Referenz und werden kontinuierlich aktualisiert

Das obige ist der detaillierte Inhalt vonSo implementieren Sie mehrzeilige Ellipsen in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!