So konvertieren Sie zusätzlichen Text in HTML in Auslassungspunkte

Wenn Sie zusätzlichen Text in HTML als Auslassungspunkte anzeigen möchten, gibt es mehrere Möglichkeiten:

Einzeiliger Text:

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>Dokument</title>
    <style type="text/css">
    .Kasten{
        Breite: 200px;
        Hintergrundfarbe: Aqua;
        Textüberlauf: Auslassungspunkte;
        Überlauf: versteckt;
        Leerzeichen: Nowrap;
    }
    </Stil>
</Kopf>
<Text>
    <div class="box">Es geht um die Paprikastreusel. Scola zu sehen bedeutet, zu öffnen. Es geht darum, dass die Kartenmaschine kommt. Die Zeit zum Abheften und Kardieren ist gekommen. Verbreite dich glücklich nach Hause. Verbreite dich. Verbreite dich. Verbreite dich glücklich nach Hause. Verbreite Gesundheit</div>
</body>
</html>

Mehrzeiliger Text:

1. Verwenden der Eigenschaft -webkit-line-clamp

.Kasten{
    Breite: 200px;
    Überlauf: versteckt;
    Textüberlauf: Auslassungspunkte;
    Anzeige: -webkit-box;
    -Webkit-Leitungsklemme: 2;
    -webkit-box-orient: vertikal;
    Rand: durchgehend 1 Pixel schwarz;
}

Nachteile: Gilt nur für WebKit-Kernel oder mobile Seiten. Es wird in Browsern wie Firefox und IE nicht unterstützt.

2. Verwenden Sie Pseudoelemente, um die Implementierung zu simulieren

Legen Sie eine feste Breite und Höhe fest, verbergen Sie den überschüssigen Teil und verwenden Sie ein Element mit Auslassungspunkten (...) am Ende, um einen Teil des Inhalts abzudecken.

.Kasten{
    Höhe: 200px;
    Breite: 200px;
    Position: relativ;
    Zeilenhöhe: 1,4em;
    Höhe: 4,2em;
    Überlauf: versteckt;
}
.box::nach {
    Inhalt:"...";
    Schriftstärke: fett;
    Position: absolut;
    unten: 0;
    rechts:0;
    Polsterung: 0 -20px 1px 45px;
    Hintergrundfarbe: weiß;
}

Hier wird ein Pseudoelement mit Auslassungspunkten und weißer Hintergrundfarbe verwendet, um einen Teil des Inhalts abzudecken. Die Höhe beträgt das Dreifache der Zeilenhöhe. Stellen Sie es auf die Anzahl der Zeilen ein, die Sie anzeigen müssen.

Dieser Ansatz ist relativ einfach zu implementieren und weist eine bessere Kompatibilität auf.

Hinweis: Wenn Sie mit IE6 oder 7 kompatibel sein möchten, können Sie keine Pseudoelemente verwenden. Sie können ein <div>- oder <span>-Tag verwenden. Wenn Sie IE8 unterstützen möchten, müssen Sie ::after als :after schreiben.

Dies ist das Ende dieses Artikels zum Konvertieren von zusätzlichem Text in Auslassungspunkte in HTML. Weitere Informationen zum Konvertieren von zusätzlichem Text in Auslassungspunkte in HTML finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die verwandten Artikel weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

<<: Teilen einiger wunderbarer Verwendungsmöglichkeiten von wxs-Dateien im WeChat-Applet

>>: Detaillierte Erläuterung der vorkompilierten CSS-Sprachen und ihrer Unterschiede

jQuery implementiert die Anzeige und Ausblendung von Anzeigenanimationen

Detaillierte Erläuterung der Definition und Verwendung von in MySQL gespeicherten Funktionen (benutzerdefinierten Funktionen)

Artikel

Gemeinsame Nutzung von zwei Plug-Ins zur Übersetzung von Webseiten

Detaillierte Erklärung der Lösung für das Problem, dass der Inhalt, auf den der src des Iframes verweist, nicht aktualisiert wird

Problembeschreibung html <iframe id="h5In...

Implementierung der MySQL-Benutzerrechteverwaltung

1. Einführung in MySQL-Berechtigungen Es gibt 4 T...

So konvertieren Sie zusätzlichen Text in HTML in Auslassungspunkte

jQuery implementiert die Anzeige und Ausblendung von Anzeigenanimationen

So stellen Sie Spring Boot mit Docker bereit

So ändern Sie das Terminal in Ubuntu 18 in eine schöne Eingabeaufforderung

Analyse der Implementierungsmethoden für MySQL-Datensicherung und -Wiederherstellung

Detaillierte Erklärung des Responsive-Prinzips von Vue3

So erhalten Sie ein dauerhaftes kostenloses SSL-Zertifikat von Let’s Encrypt in Docker

Detaillierte Erläuterung der Definition und Verwendung von in MySQL gespeicherten Funktionen (benutzerdefinierten Funktionen)

Gemeinsame Nutzung von zwei Plug-Ins zur Übersetzung von Webseiten

So richten Sie eine automatische tägliche Datenbanksicherung in Linux ein

Detaillierte Erklärung des Vue-Plugins

Artikel empfehlen

Eine kurze Diskussion über den CSS-Kaskadierungsmechanismus

Hinweise zum MySQL-Datenbank-Sicherungsprozess

Konfiguration des SSL-Zertifikats für den Nginx-Domänennamen (Website-HTTP auf https aktualisiert)

Vorteile von INSERT INTO SET in MySQL

Das Linux-System öffnet die Ports 3306, 8080 usw. zur Außenwelt. Detaillierte Erläuterung der Firewall-Einstellungen

Lösung für die Protokollpersistenzlösung des Nginx-Ingress-Controllers

Webdesign-Tutorial (7): Verbesserung der Webdesign-Effizienz

MySQL-Konfiguration Master-Slave-Server (ein Master und mehrere Slaves)

Integrierte Objekte, Werttypen und Referenztypen in JavaScript-Objekten erklärt

MySQL 5.6 Installationsschritte mit Bildern und Text

MySQL-Unterabfrage und Details zur Verknüpfungstabelle

Vue implementiert einen visuellen Drag-Page-Editor

Detaillierte Erläuterung des Ausführungsprozesses der JavaScript-Engine V8

Detaillierte Erklärung der Lösung für das Problem, dass der Inhalt, auf den der src des Iframes verweist, nicht aktualisiert wird

Implementierung der MySQL-Benutzerrechteverwaltung