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

Vue3 implementiert ein Beispiel für eine Nachrichtenkomponente

Inhaltsverzeichnis Komponentendesign Definieren d...

MySQL verwendet frm-Dateien und ibd-Dateien, um Tabellendaten wiederherzustellen

Inhaltsverzeichnis Einführung in FRM-Dateien und ...

MySQL-Tutorial: Ausführliche Erklärung zum Unterabfragebeispiel

Inhaltsverzeichnis 1. Was ist eine Unterabfrage? ...

Detaillierte Erläuterung des zeitgesteuerten Protokollschneidens von Nginx

Vorwort Standardmäßig werden Nginx-Protokolle in ...

Analyse der Nutzung des Xmeter API-Schnittstellentesttools

XMeter API bietet einen umfassenden Online-Schnit...

Singleton-Entwurfsmuster in JavaScript

Inhaltsverzeichnis 1. Was ist ein Entwurfsmuster?...

So installieren Sie eine virtuelle Maschine mit Windows-Diensten auf dem Mac

1. Laden Sie die virtuelle Maschine herunter Offi...

Transplantieren des Befehls mkfs.vfat in Busybox unter Linux

Um die Lebensdauer der Festplatte zum Speichern v...

So legen Sie in Linux eine feste IP fest (getestet und effektiv)

Öffnen Sie zunächst die virtuelle Maschine Öffnen...

Tiefgreifendes Verständnis der verschiedenen Sperren von MySQL

Inhaltsverzeichnis Schlossübersicht Sperrklassifi...

Ein super detailliertes Vue-Router Schritt-für-Schritt-Tutorial

Inhaltsverzeichnis 1. Router-Ansicht 2. Router-Ve...