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

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

Problembeschreibung: Ich habe einen Desktop-Compu...

MySQL 8.0.12 Installationskonfigurationsmethode und Kennwortänderung

In diesem Artikel werden die Installations- und K...

So verweisen Sie auf jQuery in einer Webseite

Die Referenzierung ist über CDN (Content Delivery ...

CSS-Overflow-Wrap – Verwendung neuer Eigenschaftswerte überall

1. Verstehen Sie zunächst das Overflow-Wrap-Attri...

Zusammenfassung der CSS-Schwebeelementanalyse

Float: links/rechts/keine; 1. Gleichstufiges Schw...

So verwenden Sie die asynchrone Anforderungs-API von Axios in Vue

Inhaltsverzeichnis Einrichten einer einfachen HTT...

Detaillierte Erklärung des TIMESTAMPDIFF-Falls in MySQL

1. Syntax TIMESTAMPDIFF(Einheit, Beginn, Ende); G...

Einführung und Beispiele für versteckte Felder in HTML

Grundlegende Syntax: <Eingabetyp="versteck...

Detaillierte Zusammenfassung häufig verwendeter MySQL-Funktionen

Inhaltsverzeichnis Allgemeine MySQL-Funktionen 1....

TypeScript-Aufzählungstypen im Detail erklären

Inhaltsverzeichnis 1. Digitale Aufzählung 2. Zeic...