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 zum Erzielen eines dynamischen Hintergrundverlaufseffekts

Eine schnelle Lösung für den Fehler #1929 Falscher Datums-/Uhrzeitwert: '''' für die Spalte ''createtime'' bei Verwendung von MySQL 5.x oder höher

Nachdem ich MySQL installiert hatte, erhielt ich ...

CSS3-Eigenschaft line-clamp steuert die Verwendung von Textzeilen

CSS3 zum Erzielen eines dynamischen Hintergrundverlaufseffekts

Lösung für den Konflikt zwischen zwei Registerkartennavigation in HTML

vitrualBox+ubuntu16.04 installieren Sie Python3.6, neuestes Tutorial und detaillierte Schritte

Analyse von MySQL-Parallelitätsproblemen und -Lösungen

Detaillierte Erklärung der HTML-Formularelemente (Teil 1)

Beispiel für die Verwendung eines negativen Rands zum Erreichen eines durchschnittlichen Layouts in CSS

MySQL berechnet die Anzahl der Tage, Monate und Jahre zwischen zwei Daten

Tutorial zur Neuinstallation von MySQL unter Windows 64-Bit (Zip-Version, dekomprimierte Version der MySQL-Installation)

Eine kurze Diskussion über die Unterschiede und Verbindungen zwischen .html, .htm, .shtml und .shtm

Detaillierte Erläuterung der Wissenspunkte zur Linux-Remoteverwaltung und SSHD-Dienstüberprüfung

Artikel empfehlen

Detaillierte Erläuterung zur Verwendung von Amoeba zum Implementieren der Lese-/Schreibtrennung einer MySQL-Datenbank

Erste Erkundung gängiger Befehle für Docker-Anfänger

Detaillierte Erläuterung der Verwendung von Gulp.js, einem leistungsstarken Tool für die Front-End-Aufgabenerstellung

JavaScript zur Nachahmung der Registrierungs- und Anmeldefunktion der offiziellen Xiaomi-Website

So ändern Sie die Länge eines Eingabetextfelds entsprechend seinem Inhalt

Tutorial zur Installation einer MySQL-ZIP-Datei

Detaillierte Erläuterung der MySQL-Mehrtabellenabfrage

Auszeichnungssprache - CSS-Layout

Eine schnelle Lösung für den Fehler #1929 Falscher Datums-/Uhrzeitwert: '''' für die Spalte ''createtime'' bei Verwendung von MySQL 5.x oder höher

Implementierung des Aufbaus eines Kubernetes-Clusters mit VirtualBox+Ubuntu16

FastDFS- und Nginx-Integration zur Codeanalyse

Implementierungsbeispiel zum Schließen der Browserabmeldung in Vue

Detaillierte Erklärung des Konflikts zwischen Flex-Layout und Position: absolut/fest

JavaScript zur Implementierung des Flugzeugkriegsspiels

Grafisches Tutorial zur Installation und Konfiguration der MySQL-Version 5.7.15