CSS3-Eigenschaft line-clamp steuert die Verwendung von Textzeilen

Beschreibung: Begrenzen Sie die Anzahl der Textzeilen, die in einem Blockelement angezeigt werden.

-webkit-line-clamp ist eine nicht unterstützte WebKit-Eigenschaft, die nicht im CSS-Spezifikationsentwurf erscheint.

Um diesen Effekt zu erzielen, müssen andere exotische WebKit-Eigenschaften kombiniert werden. Häufige Kombinationseigenschaften:

Anzeige: -webkit-box; ist ein erforderliches Attribut, das das Objekt als elastisches Boxmodell anzeigt.
-webkit-box-orient muss mit der Eigenschaft kombiniert werden, um die Anordnung der untergeordneten Elemente des Flexbox-Objekts festzulegen oder abzurufen.
Mit text-overflow kann bei mehrzeiligen Texten der Text ausgeblendet werden, der den Bereich mit Auslassungspunkten „…“ überschreitet.

Heute haben wir eine Optimierungsanfrage erhalten, die erfordert, dass der Inhalt der Beitragsliste auf 3 Zeilen mit Auslassungspunkten „…“ gekürzt wird.

<!DOCTYPE HTML>
<html>
<Kopf>
    <meta charset="utf-8">
    <title>Cline-Klemme</title>
    <Stil>    
            .Kasten{
                Breite: 200px;
                Höhe: 300px;
                Rand: 1px, durchgehend schwarz;
            }
            P{
                 Anzeige: -webkit-box;
                 -webkit-box-orient: vertikal;
                  -webkit-line-clamp: 4; /*Setzen Sie die maximale Zeilenanzahl für das p-Element auf 4. Das übergeordnete Element muss die Breite ausfüllen, damit dies offensichtlich ist*/
                  Textüberlauf: Auslassungspunkte;
                  Überlauf: versteckt;
                 /* Autoprefixer: aus */
                 -webkit-box-orient: vertikal;
                  /* Autopräfixer: ein */
                  /*Aufgrund der Codeumgebung wird webkit-box-orient herausgefiltert. Dieser Schlüsselwort-Autoprefixer kann vom Filtern ausgenommen werden.*/
          Zeilenumbruch: Wortumbruch;
          Worttrennung:alles trennen;
} </Stil> 
</Kopf> 
<Text> 
<div Klasse="Box"> 
    <p> statisch: Das Objekt folgt dem normalen Fluss. Die Eigenschaften oben, rechts, unten, links usw. werden nicht angewendet. relativ: Das Objekt folgt dem normalen Fluss, und wenn es durch die Eigenschaften oben, rechts, unten, links relativ zu seiner Position im normalen Fluss versetzt wird, wirkt es sich nicht auf Elemente im normalen Fluss aus. absolut: Das Objekt liegt außerhalb des normalen Flusses und wird mithilfe von Eigenschaften wie oben, rechts, unten und links absolut positioniert.
    </p> 
</div> 
</body> 
</html>

Die Wirkung ist wie folgt:

Wenn der Text in Ihrem Tag auf Englisch ist, wird er nicht automatisch umbrochen. Sie müssen daher den folgenden Code hinzufügen, damit er automatisch umbrochen wird:

Zeilenumbruch: Wortumbruch;
Worttrennung:alles trennen;

Natürlich können Sie auch das Plug-In clamp.js verwenden

Damit ist dieser Artikel über die Verwendung der CSS3-Eigenschaft „line-clamp“ zur Steuerung der Anzahl von Textzeilen abgeschlossen. Weitere Informationen zur Verwendung der CSS3-Eigenschaft „line-clamp“ zur Steuerung der Anzahl von Zeilen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Wir hoffen, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

<<: Frage zu benutzerdefinierten Attributen von HTML-Tags

>>: Detaillierte Erklärung des Vue-Plugins

CSS3-Eigenschaft line-clamp steuert die Verwendung von Textzeilen

Verwenden Sie natives JS, um den Scroll-Effekt des Live-Bullet-Bildschirms zu simulieren

Tipps zum MySQL-Abfragecache

Mehrere Situationen, in denen Div durch Iframe abgedeckt ist, und ihre Lösungen

React-Beispiel, das den Fortschritt des Datei-Uploads zeigt

jQuery erzielt einen Bildlaufwiedergabeeffekt auf großem Bildschirm

Docker-Volumes-Dateizuordnungsmethode

Eine kurze Analyse der asynchronen DOM-Aktualisierung von Vue

Zusammenfassung der Lösungen für allgemeine Linux-Probleme

Eine kurze Analyse von Linux resolv.conf

Vollständige MySQL-Sicherung und schnelle Wiederherstellungsmethoden

Artikel empfehlen

Details zur React Routing Link-Konfiguration

JavaScript erklärt die Kapselung und Verwendung von Zeitlupenanimationen

Detaillierte Erklärung der Bedeutung von N und M im MySQL-Datentyp DECIMAL(N,M)

Detaillierte Erklärung zur Installation des Systems auf VMware Workstation 14 Pro (virtuelle Maschine)

Lösung für den nicht funktionierenden Aufruf this.$notify.close() von ElementUI

Detaillierte Erläuterung der Axios-Kapselung und des API-Schnittstellenmanagements im React-Projekt

Drei JavaScript-Methoden zur Lösung des Joseph-Ring-Problems

So finden Sie langsame MySQL-Abfragen

JavaScript implementiert die Verarbeitung großer Datei-Uploads

Grafisches Tutorial zur Installation von MySQL5.7.18 im Windows-System

Problemlösungsvorgänge für Alpine Docker-Bildschriftarten

Detaillierte Beispiele für den Unterschied zwischen den Methoden watch und computed in Vue.js

Einführung in die Verwendung des offiziellen MySQL-Leistungstesttools mysqlslap

Designtheorie: Lesbarkeit und Verständlichkeit von Texten

Eine Sammlung gängiger Verwendungen von HTML-Meta-Tags