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

Detaillierte Erläuterung der Live-Übertragungsfunktion von Vue

Vor kurzem hat das Unternehmen zufällig Live-Über...

Lösungen für MySQL OOM (Speicherüberlauf)

OOM steht für „Out Of Memory“, was so viel bedeut...

Implementierung des MySQL Shell import_table-Datenimports

Inhaltsverzeichnis 1. Einführung in import_table ...

So verhindern Sie, dass Flash HTML-Div-Elemente abdeckt

Als ich heute einen Flash-Werbecode schrieb, habe ...

Implementierung von MySQL Multi-version Concurrency Control MVCC

Inhaltsverzeichnis Was ist MVCC MVCC-Implementier...

Ursachen und Lösungen für den MySQL-Fehler „zu viele Verbindungen“

Inhaltsverzeichnis Kurzzusammenfassung Heute Mitt...

So konfigurieren Sie nginx+php+mysql in Docker

Verstehen Sie zunächst eine Methode: Aufrufen ein...

MySQL 8.0 kann jetzt JSON verarbeiten

Inhaltsverzeichnis 1. Kurzübersicht 2. JSON-Grund...

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

Ich habe den Dialog beim Schließen verwendet und e...

Grundlegendes Tutorial zur Steuerung des mobilen Roboters Turtlebot3 mit ROS

Chinesisch-Tutorial https://www.ncnynl.com/catego...

Zusammenfassung gängiger Nginx-Techniken und Beispiele

1. Priorität mehrerer Server Wenn beispielsweise ...

Designperspektive Technologie ist ein wichtiges Kapital der Designfähigkeit

Ein Designsoldat fragte: „Kann ich nur reines Des...