HTML übertrifft das Implementierungsprinzip und den Code des Textzeilenabfangs

HTML übertrifft das Implementierungsprinzip und den Code des Textzeilenabfangs
Der HTML-Code zum Abfangen von mehrzeiligem Text lautet wie folgt:

HTML:

Code kopieren
Der Code lautet wie folgt:

<div Klasse="sytm-text-1">
<p>
123WORDPRESS.COM Website: https://www.jb51.net
</p>
</div>
<div Klasse="sytm-text-2">
<p>
123WORDPRESS.COM Website: https://www.jb51.net
</p>
</div>

CSS:

Code kopieren
Der Code lautet wie folgt:

.sytm-text-1 {
Farbe: #FFF;
Hintergrund: #000;
Breite: 410px;
Höhe: 22px;
}
.sytm-text-2 {
Farbe: #FFF;
Hintergrund: #000;
Breite: 410px;
Höhe: 44px;
}
P {
Zeilenhöhe: 22px;
}

JS (jQuery importieren):

Code kopieren
Der Code lautet wie folgt:

$("div[Klasse*='sytm-text']").jeweils(Funktion(e){
var divHeight = $(this).height();
var $p = $("p", $(diese)).eq(0);
während ($p.outerHeight() > divHeight) {
$p.text($p.text().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "..."));
};
});

Aus dem obigen Code können wir erkennen, dass das Hauptprinzip zum Erreichen dieses Effekts darin besteht, die Höhe des untergeordneten Containers (p) mit der des übergeordneten Containers (div) zu vergleichen und gemäß dem regulären Ausdruck ein Zeichenabfangen durchzuführen, bis beide gleich sind. Daher liegt der Schlüssel zur Steuerung der Anzahl abgefangener Zeilen natürlich in der Div-Höhe.

<<:  PNG-Alpha-Transparenz in IE6 (vollständige Sammlung)

>>:  Detaillierte Erklärung der CSS-Float-Eigenschaft

Artikel empfehlen

Informationen zum Debuggen von CSS-Cross-Browser-Style-Fehlern

Als Erstes müssen Sie einen guten Browser auswähl...

Einführung in den CSS BEM-Benennungsstandard (empfohlen)

1 Was ist der BEM-Namensstandard Bem ist die Abkü...

Lösung für Ubuntu, das keine Verbindung zum Internet herstellen kann

Problembeschreibung: Ich habe einen Desktop-Compu...

Designtheorie: Warum suchen wir am falschen Ort?

Ich bin vor ein paar Tagen mit dem Bus zur Arbeit...

Zusammenfassung des Wissens zu MySQL-Sperren

Sperren in MySQL Sperren sind ein Mittel, um Ress...

Grundprinzipien für die Zusammenstellung einer Website-Homepage

1. Die Organisationsstruktur des Hypertext-Dokumen...

So implementieren Sie die Navigationsfunktion im WeChat Mini-Programm

1. Rendern2. Bedienungsschritte 1. Beantragen Sie...

Detaillierte Erklärung asynchroner Iteratoren in nodejs

Inhaltsverzeichnis Vorwort Was sind asynchrone It...

Zusammenfassung der Erfahrungen mit der Web-Frontend-Entwicklung

XML-Dateien sollten so weit wie möglich in UTF-8 ...

Mit HTML+CSS3 implementierte Anmeldeschnittstelle

Ergebnisse erzielen Bauen Sie zunächst mit HTML e...