Langer HTML-Text wird automatisch abgeschnitten, wenn er die Tag-Breite überschreitet

Wenn wir langen Text anzeigen, müssen wir auf der C#-Seite häufig Zeichen abfangen, aber das ist definitiv keine gute Sache, da unser langer Text häufig durch HTML-Tags dargestellt wird. Wenn Sie ihn nicht richtig laden, werden verstümmelte Zeichen angezeigt (die Hälfte des HTML-Tags wird angezeigt). Eine bessere Möglichkeit besteht darin, diese Funktion über CSS zu implementieren.
Wenn das Span-Tag das Limit überschreitet, wird der Inhalt automatisch umbrochen.

Code kopieren

Der Code lautet wie folgt:

Leerzeichen: Nowrap; Leerzeichen: Norma; Anzeige: Inline-Block;

Wenn die Zeile den automatisch ausgeblendeten Bereich überschreitet, wird sie nicht in einer Zeile angezeigt (muss sich in einem Blockelement befinden).

Code kopieren

Der Code lautet wie folgt:

Überlauf: versteckt; Leerzeichen: Nowrap;

Wenn Sie nach dem Text ein ... hinzufügen möchten, können Sie text-overflow: ellipsis verwenden; die meisten gängigen Browser unterstützen dieses Attribut

Code kopieren

Der Code lautet wie folgt:

.tbconxx {
schweben: links;
Breite: 255px;
Polsterung: 5px 10px;
}
.tbconxx li,tbconxx span {
Polsterung links: 7px;
Textüberlauf: Auslassungspunkte;
Überlauf: versteckt;
Anzeige: Block;
Leerzeichen: Nowrap;
Breite: 240px;
}

Dadurch wird der Text, der das Limit überschreitet, automatisch ausgeblendet.

<<: Zusammenfassung der MySQL InnoDB-Architektur

>>: Zwei Beispiele für die Verwendung von Symbolen in Vue3

So schreiben Sie die übergeordneten und untergeordneten Verzeichnisse von relativen HTML-Pfaden

Wenn div auf contentEditable=true gesetzt ist, kann der Cursor nach dem Zurücksetzen seines Inhalts nicht positioniert werden

Ich habe kürzlich an einer Kommentarfunktion gear...

Langer HTML-Text wird automatisch abgeschnitten, wenn er die Tag-Breite überschreitet

So schreiben Sie die übergeordneten und untergeordneten Verzeichnisse von relativen HTML-Pfaden

Detaillierte Erläuterung gängiger Methoden von JavaScript-Arrays

Detaillierte Erläuterung der Ereignisschleifen-Ereigniswarteschlange von js im Browser

Tutorial zum Herunterladen und Installieren von MySQL 8.0.12 WinX64

So installieren Sie MySQL 5.7.29 mit einem Klick mithilfe eines Shell-Skripts

7 nützliche neue TypeScript-Funktionen

10 sehr gute CSS-Fähigkeiten sammeln und teilen

Lösung zum automatischen Stoppen des MySQL-Dienstes

So führen Sie Tomcat-Quellcode im Maven-Modus aus

Zusammenfassung der mathematischen Symbole in Unicode

Artikel empfehlen

JavaScript zum Erzielen eines elastischen Navigationseffekts

Anmeldung zur Token-Verifizierung im Vue-Projekt (Front-End-Teil)

Vue implementiert eine Online-Vorschau von PDF-Dateien (mithilfe von pdf.js/iframe/embed)

So übergeben Sie den Wert des Auswahl-Dropdown-Felds an die ID, um den Code zu implementieren

Detaillierte Erklärung zu anonymen Slots und benannten Slots in Vue

So stellen Sie Dienste in Windows Server 2016 bereit (Grafisches Tutorial)

Linux bestätigt, dass die Datendiskette deinstalliert wurde und ein neues benutzerdefiniertes Image erstellt werden kann

Wenn div auf contentEditable=true gesetzt ist, kann der Cursor nach dem Zurücksetzen seines Inhalts nicht positioniert werden

So unterstreichen Sie das A-Tag und ändern die Farbe vor und nach dem Klicken

MySQL 8.0 MIT Abfragedetails

Analyse und Meinungen zum Design der Produktdetailseite auf der Taobao-Website (Bild)

So verwenden Sie eine VLAN-getaggte Ethernet-Karte im CentOS/RHEL-System

Detaillierte Analyse jeder Phase der HTTP-Anforderungsverarbeitung von Nginx

MySQL 5.7.17 Installations- und Konfigurations-Tutorial für Mac

So verwenden Sie VUE, um die Ali Iconfont-Bibliothek online aufzurufen