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

So lösen Sie das Problem, dass MySQL nicht gestartet werden kann, da keine PID erstellt werden kann

HTML übertrifft das Implementierungsprinzip und den Code des Textzeilenabfangs

So lösen Sie das Problem, dass MySQL nicht gestartet werden kann, da keine PID erstellt werden kann

So erzielen Sie mit Vue3 beispielsweise einen Lupeneffekt

ElementUI implementiert die Funktionsschaltfläche zum Zurücksetzen des Formulars el-form

Installations-Tutorial zur dekomprimierten Version von MySQL 5.7.23 mit Bildern und Text

Installationsprozess von CentOS8 Linux 8.0.1905 (Abbildung)

Analysieren Sie, wie eine SQL-Abfrageanweisung in MySQL ausgeführt wird

Beispiel für die Verwendung der setInterval-Funktion in React

So verwenden Sie die MySQL DATEDIFF-Funktion, um das Zeitintervall zwischen zwei Daten zu ermitteln

Einige Probleme, die durch inkonsistente MySQL-Kodierung verursacht werden können

Detaillierte Erklärung zum Ändern des Stils von el-select: popper-append-to-body und popper-class

Artikel empfehlen

Detaillierte Schritte zur Installation der MySQL 5.6 X64-Version unter Linux

WeChat-Applet-Beispiel für die direkte Verwendung von Funktionen in {{ }}

Hadoop 3.1.1 Vollständig verteiltes Installationshandbuch unter CentOS 6.8 (empfohlen)

Detaillierte Erläuterung der gespeicherten Prozeduren, Cursor und Transaktionsbeispiele von MySQL

Verwendung von CSS-Animationseigenschaften und Beispielcode (Übergang/Transformation/Animation)

Der IE8-Browser wird vollständig mit Webseitenstandards kompatibel sein

Spezifische Verwendung von Docker Anonymous Mount und Named Mount

Der Button hat einen hässlichen grauen Rand. Wie kann ich ihn entfernen?

Beispiel für den Aufbau eines Redis-Sentinel-Clusters basierend auf Docker

Hbase – Erste Schritte

Erklärung zur Verbindung des Mac mit Remote-Servern über SSH in verschiedenen Terminals

MySQL 8.0.20 Installations- und Konfigurations-Tutorial unter Docker

So stellen Sie MySQL-Master und -Slave in Docker bereit

Lösung für das Problem, dass Java keine Verbindung zu MySQL 8.0 herstellen kann

Eine detaillierte Einführung in die Linux-Verzeichnisstruktur