Zwei gängige Lösungen für den HTML-Textüberlauf zeigen Auslassungszeichen an

Zwei gängige Lösungen für den HTML-Textüberlauf zeigen Auslassungszeichen an

Methode 1: Verwenden Sie zur Lösung die CSS-Überlaufauslassung

Die Lösung lautet wie folgt:

CSS Code:

Anzeige: -webkit-box;
            Anzeige: -moz-box;
            Leerzeichen: vor dem Umbruch;
            Zeilenumbruch: Wort umbrechen;
            Überlauf: versteckt;
            Textüberlauf: Auslassungspunkte;
            -webkit-box-orient: vertikal;
            -webkit-line-clamp:2; /*Zeilenanzahl anzeigen*/

Methode 2: Verwenden Sie jQuery, um Textinhalte abzufangen und zu ersetzen

Die Lösung lautet wie folgt:

js-Code:

$(".text").jeweils(Funktion() {
    if ($(this).text().length > 20) {//Erfordert, dass die Anzahl der Wörter größer als 20 ist, bevor die Anzahl der Wörter ersetzt wird$(this).html($(this).text().replace(/\s+/g, "").substr(0, 80) + "...")
        //Beginnen Sie mit dem Ersetzen von 0 bis 80 und ersetzen Sie den verbleibenden Textinhalt durch „…“
    }
})

Die beiden oben genannten Methoden können auf den Klassennamen des Textinhalts angewendet werden.

Zusammenfassen

Oben sind zwei gängige Lösungen für das Problem der Auslassungszeichen, die angezeigt werden, wenn HTML-Text überläuft. Ich hoffe, es wird Ihnen helfen. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!

<<:  MySQL-Datenbank-JDBC-Programmierung (Java stellt eine Verbindung zu MySQL her)

>>:  Was ist JavaScript Anti-Shake und Throttling

Artikel empfehlen

So zeigen Sie historische Befehle in Linux an und führen sie aus

Historische Befehle anzeigen und bestimmte Befehl...

Zusammenfassung der Dockerfile-Maven-Plugin-Nutzungsanleitung

Inhaltsverzeichnis POM-Konfiguration Setting.xml-...

Lernen Sie Node.js von Grund auf

Inhaltsverzeichnis URL-Modul 1.Parse-Methode 2. F...

So fügen Sie einem Benutzer in einer Linux-Umgebung Sudo-Berechtigungen hinzu

sudo-Konfigurationsdatei Die Standardkonfiguratio...

DOCTYPE-Element ausführliche Erklärung vollständige Version

1. Übersicht In diesem Artikel wird das DOCTYPE-E...

Implementierung der VUE-Anzeige unendlicher Ebenenbaum-Datenstrukturen

Inhaltsverzeichnis Rekursiver Aufruf der Komponen...

Das Front-End muss wissen, wie Bilder verzögert geladen werden (drei Methoden)

Inhaltsverzeichnis 1. Was ist Lazy Loading? 2. Im...

So fragen Sie die neueste Transaktions-ID in MySQL ab

Vorne geschrieben: Manchmal müssen Sie möglicherw...

Das WeChat-Applet implementiert eine einfache Taschenrechnerfunktion

In diesem Artikel wird der spezifische Code für d...

So konvertieren Sie Chinesisch in HTML in UTF-8

In HTML kann die chinesische Phrase „學好好學“ als „學...

3 Codes zur automatischen Aktualisierung von Webseiten

Tatsächlich ist es sehr einfach, diesen Effekt zu ...

7 Fähigkeiten, die großartige Grafikdesigner beherrschen müssen

1》Seien Sie gut im Webdesign 2》Wissen, wie man Web...