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

Floaten und Floaten löschen in der Übersichtsseite

CSS3-Eigenschaft line-clamp steuert die Verwendung von Textzeilen

Floaten und Floaten löschen in der Übersichtsseite

Docker + Daocloud realisiert die automatische Erstellung und Bereitstellung von Front-End-Projekten

Frage zur Webseitenerstellung: Bilddateipfad

Vue3 realisiert den Bildlupeneffekt

Ubuntu MySQL-Version auf 5.7 aktualisiert

So überwachen Sie Oracle-Datenbanken mit Zabbix Agent2

Warum MySQL die Verwendung von Unterabfragen und Verknüpfungen nicht empfiehlt

React implementiert die Prinzipanalyse der drei Phasen Laden, Laden, Abschluss und Ladefehler

Ideen und Codes zur Realisierung des Lupeneffekts in js

Vue implementiert nahtloses Scrollen von Listen

Artikel empfehlen

JavaScript, um das Bild mit der Maus zu bewegen

Vergleichstabelle für HTML-Sondersymbole auf Webseiten

Erläuterung der CSS3-Überlaufeigenschaft

Detaillierte Anweisungen zur Installation von Jenkins auf Ubuntu 16.04

Mit CSS3 implementierte Schaltfläche zum Hovern von Bildern

MySQL ändert die Standard-Engine und Zeichensatzdetails

5 Möglichkeiten zur Migration von MySQL zu ClickHouse

Für die Verwendung des Docker-Befehls ist kein Sudo erforderlich

Vue-pdf implementiert eine Online-Vorschau von PDF-Dateien

Detaillierte Erklärung zur Verwendung von Docker durch Deepin zur Installation einer MySQL-Datenbank

Detaillierte Erklärung der wunderbaren Verwendung von SUID, SGID und SBIT in Linux

Implementierungsbeispiel für dynamische Routing-Breadcrumbs für Elemente

CentOS7 ermöglicht MySQL8 Master-Slave-Backup und täglich geplantes Voll-Backup (empfohlen)

Detaillierte Erklärung zum Erstellen eines Arrays in JavaScript

Vue implementiert ein Beispiel zum Herunterziehen und Scrollen zum Laden von Daten