Stellen Sie die Breite der Tabelle so ein, dass sie sich nicht mit dem Text ändert
|
Nachdem die Tabellenbreite auf der Seite auf width="600px" eingestellt wurde, ist die Breite immer noch nicht festgelegt. Der Text wird nicht umbrochen, wenn er zu lang ist, was die Tabelle verformt. Lösung: 1. Die Breite der Tabellensätze ist sowohl absolut als auch relativ akzeptabel. Tabellenlayout: fest; Wenn diese Eigenschaft festgelegt ist, haben alle verbleibenden TDs die gleiche Breite. Nach dieser Operation ist die Breite der Tabelle festgelegt. Wenn der Artikel jedoch sehr lang ist, bedeckt der Text die Lösung: Fügen Sie style="word-wrap:break-word;" zum td hinzu, um den Text umzubrechen. Wenn Sie den Text nicht umbrechen möchten, können Sie den Inhalt, der das Limit überschreitet, ausblenden und durch Auslassungspunkte ersetzen: Oben td hinzufügen Code kopieren Der Code lautet wie folgt:Überlauf: versteckt; Leerzeichen:nowrap; text-overflow:ellipsis; (derzeit nur in IE8 getestet) Empfohlene Methode (14.11.2013 von Zhang Lei) Verwenden Sie div, um den Inhalt von td zu steuern TD hinzufügen (1) Text wird automatisch ausgeblendet, wenn er die Breite und Höhe überschreitet Code kopieren Der Code lautet wie folgt:<div style="width:100px;height:25px;overflow-x:hidden;overflow-y:hidden;">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div> (2) Stellen Sie die TD-Breite so ein, dass sie automatisch umgebrochen wird, wenn sie die Länge überschreitet Code kopieren Der Code lautet wie folgt:<td><div style="width:100px;word-wrap:break-word;" >aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div> </td> |
<<: Entdecken Sie, wie Ihnen eine LED den Einstieg in den Linux-Kernel erleichtert
>>: Einführung in das Fokuselement document.activeELEment in JavaScript
Artikel empfehlen
Beheben von Problemen beim Importieren und Exportieren von Mysql
Hintergrund Da ich alle meine Aufgaben auf Docker...
Zwei Möglichkeiten zum Einführen von SVG-Symbolen in Vue
So führen Sie SVG-Symbole in Vue ein Methode 1 zu...
Vollständiger Schrittbericht der TabBar-Komponente der Vue-Kapselung
Inhaltsverzeichnis Umsetzungsideen: Schritt 1: Ko...
Vue+js: Klicken Sie auf den Pfeil, um die Bilder zu wechseln
In diesem Artikelbeispiel wird der spezifische Co...
Hinweise zum erweiterten Zeichengerätetreiber des Linux-Kernel-Gerätetreibers
/****************** * Erweiterter Zeichengerätetr...
Detailliertes Verständnis von umask in den neuen Linux-Dateiberechtigungseinstellungen
Vorwort Der Ursprung ist Frage 1: Wenn Ihre Umask...
7 Möglichkeiten, Elemente mit CSS vertikal zu zentrieren
【1】Kennen Sie die Breite und Höhe des zentrierten...
Blog-Design Webdesign-Debüt
Die erste Webseite, die ich entworfen habe, sieht...
So installieren Sie ein Linux-System (Redhat8) und die Netzwerkkonfiguration virtueller Maschinen in VMware
Inhaltsverzeichnis 1. Installieren Sie VMware 1.1...
Mehrere Möglichkeiten zur Implementierung eines 0-ms-Verzögerungstimers in js
Inhaltsverzeichnis WarteschlangeMikrotask asynchr...
Installieren Sie eine virtuelle Python-Umgebung in Ubuntu 18.04
Nur als Referenz für Python-Entwickler, die Ubunt...
Implementierung eines dynamischen Partikel-Hintergrund-Plugins für die Vue-Anmeldeseite
Inhaltsverzeichnis Die dynamischen Partikeleffekt...
Detaillierte Erläuterung des Docker-Arbeitsmodus und -Prinzips
Wie in der folgenden Abbildung dargestellt: Wenn ...
Die Verknüpfungsmethode zwischen Menü und Registerkarte von vue+iview
Vue+iview-Menü und Tab-Verknüpfung Ich entwickle ...
Methoden und Schritte für den Zugriff auf die Baidu Maps API mit JavaScript
Inhaltsverzeichnis 1. Baidu Map API-Zugriff 2. Ve...