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

JavaScript imitiert die Spezialeffekte der Jingdong-Lupe

In diesem Artikel wird der spezifische Code von J...

Tiefgreifendes Verständnis des Javascript-Klassenarrays

js-Arrays sind wahrscheinlich jedem bekannt, da s...

Vue-Anweisungen für benutzerdefinierte V-HAS, Schritte zur Beurteilung der Schaltflächenberechtigung

Inhaltsverzeichnis Anwendungsszenario Einfach aus...

JavaScript zum Erzielen eines elastischen Navigationseffekts

In diesem Artikel wird der spezifische Code für J...

Häufige Fehler und Gründe für MySQL-Verbindungsfehler

=================================================...

Anmeldevorgang für das Python Flask WeChat-Applet und Implementierungscode der Anmelde-API

1. Schauen wir uns zunächst die Wirkung an Von de...

CSS realisiert den Maskeneffekt, wenn die Maus über das Bild bewegt wird

1. Setzen Sie den HTML-Code der Maskenebene und d...

Lösung für die lange Verzögerung der MySQL-Datenbank-Master-Slave-Replikation

Vorwort Die Verzögerung der MySQL Master-Slave-Re...

In einem Artikel erfahren Sie, wie Sie ein Vue-Plugin schreiben

Inhaltsverzeichnis Was ist ein Plugin Plugins sch...

Docker stellt Mysql, .Net6, Sqlserver und andere Container bereit

Inhaltsverzeichnis Installieren Sie Docker unter ...

Einige Probleme, die durch inkonsistente MySQL-Kodierung verursacht werden können

Gespeicherte Prozeduren und Codierung Wenn in ges...

So fügen Sie Codebeispiele für die Vim-Implementierung in Power Shell hinzu

1. Gehen Sie zur offiziellen Website von Vim, um ...

Detaillierte Erklärung des HTML-Bereichs-Tags

Der <area>-Tag definiert einen Bereich in e...

Details zur Reihenfolge, in der MySQL my.cnf liest

Inhaltsverzeichnis Die Reihenfolge, in der MySQL ...

Machen Sie sich nicht die Mühe mit JavaScript, wenn es mit CSS geht

Vorwort Jede Anwendung, die in JavaScript geschri...