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

Ein Artikel zum Verständnis von Operatoren in ECMAScript

Nach dem Absenden des HTML-Dropdown-Menüs bleibt der ausgewählte Wert erhalten, anstatt auf den Standardwert zurückzusetzen

Code kopieren Der Code lautet wie folgt: <html...

CSS3-Eigenschaft line-clamp steuert die Verwendung von Textzeilen

Ein Artikel zum Verständnis von Operatoren in ECMAScript

Ausführliche Erklärung der Set- und WeakSet-Sammlungen in ES6

Mysql-Operation zum Abrufen von Tabellenkommentarfeldern

Nicht standardmäßiger Implementierungscode für die MySQL UPDATE-Anweisung

JavaScript implementiert einfache Datumseffekte

MySQL verwendet ein Limit, um die Beispielmethode für Paging zu implementieren

Beispielcode zur Implementierung des Verlaufs-Tag-Menüs mit vue+elementui+vuex+sessionStorage

Ideen und Codes zur Implementierung von Iframes, um einen Teil des Website-Inhalts abzufangen

Probleme und Lösungen beim Ersetzen von Oracle durch MySQL

Praxis der Realisierung der Breiten- und Höhenanpassung von Echarts-Diagrammen in Vue

Artikel empfehlen

Zusammenfassung der Wissenspunkte zu Null in der MySQL-Datenbank

Probleme und Lösungen bei der Installation und Verwendung von VMware

Detaillierte Analyse der MySQL-Sperrblockierung

Nach dem Absenden des HTML-Dropdown-Menüs bleibt der ausgewählte Wert erhalten, anstatt auf den Standardwert zurückzusetzen

SQL-Implementierung von LeetCode (178. Punkterangliste)

MySQL-Transaktionskontrollfluss und ACID-Eigenschaften

Typescript+React zum Erzielen einfacher Drag-and-Drop-Effekte auf Mobilgeräten und PCs

Detaillierte Erklärung des JavaScript-Proxy-Objekts

Wird der veraltete Docker durch Podman ersetzt?

Natives js zur Realisierung der Bild-Upload-Steuerung

Detaillierte Erläuterung der Konfiguration und Einführung des MySQL-Halbsynchron-Replikationsprinzips

Vue verwendet E-Charts, um ein Organigramm zu zeichnen

Detaillierte Erklärung zur Installation der PHP-Curl-Erweiterung unter Linux

Vollständige Analyse des Vue-Diff-Algorithmus

Tomcat9-Download, -Installation und -Konfiguration + ausführliches Tutorial zur Integration in Eclipse