So konvertieren Sie zusätzlichen Text in HTML in Auslassungspunkte

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

Artikel empfehlen

Vue + webrtc (Tencent Cloud) Praxis der Implementierung der Live-Broadcast-Funktion

Inhaltsverzeichnis 1. Live-Übertragungseffekt 2. ...

Kalendereffekt basierend auf jQuery

In diesem Artikelbeispiel wird der spezifische Co...

Ein Artikel zeigt Ihnen, wie Sie den Watch-Listener von Vue verwenden

Inhaltsverzeichnis Hörer beobachten Format Richte...

TD-Breitenproblem beim Zusammenführen von TD-Zellen

Im folgenden Beispiel ist die Anzeige normal, wenn...

Verwenden Sie CSS, um zu verhindern, dass Lightbox die Anzeige des großen Bildcodes ohne Aktualisierung realisiert, wenn Sie auf ein kleines Bild klicken

Verwenden Sie CSS, um zu verhindern, dass Lightbo...

So installieren Sie Docker mithilfe von Skripten unter Linux Centos

Was ist die Hauptfunktion von Docker? Derzeit gib...

So aktivieren Sie die Swoole Loader-Erweiterung auf dem virtuellen Host des Linux-Systems

Besonderer Hinweis: Es wird nur die Swoole-Erweit...

Teilen Sie den detaillierten Prozess zum Einrichten von Mysql5.6, um externen Netzwerkzugriff zu ermöglichen

Ich habe kürzlich MySQL 5.6 bereitgestellt und fe...

So installieren Sie MySQL in Docker

Ich habe kürzlich Django bereitgestellt und wollt...

HTML-Tags: Sub-Tag und Sup-Tag

Heute stelle ich zwei HTML-Tags vor, die ich nich...

Eine kurze Zusammenfassung aller Kapselungsmethoden in Vue

Inhaltsverzeichnis 1. Kapselungs-API 2. Globale T...

4 Möglichkeiten, sich schnell Linux-Befehle selbst beizubringen

Wenn Sie ein Linux-Meister werden möchten, ist di...

html ein Link-Tag Titel Attribut Zeilenumbruch Mouseover Prompt Inhalt Zeilenumbruch Effekt

Die Methode zum Umbrechen des Inhalts (Titelattrib...

Durch Kombinieren von Einfügen und Auswählen wird die Methode „Einfügen des Maximalwerts eines Felds in der Datenbank + 1“ implementiert.

Dieser Artikel ist MySQL-Datenbank Frage 1 Import...

So zeigen Sie ein kleines Symbol vor der Browser-URL an

Wenn Sie viele Websites durchsuchen, werden Sie fe...