Informationen zur Layoutmethode für Inhaltsüberlauf in Tabellen

Informationen zur Layoutmethode für Inhaltsüberlauf in Tabellen

Was ist Inhaltsüberlauf? Wenn tatsächlich viel Text vorhanden ist und der Inhaltsbereich nur entsprechend lang ist, wird der zusätzliche Teil durch Punkte ersetzt.

Der Fall, den wir diesmal behandeln, betrifft eine Tabelle. Wir wissen, dass, wenn wir zu viel Textinhalt in eine Tabelle eingeben, die Tabelle durcheinander gerät. Beispielsweise wird eine Zeile zu lang angezeigt oder automatisch umbrochen. Manchmal möchten wir es aber einfach in einer Zeile mit fester Breite anzeigen, und wenn ein zusätzlicher Teil vorhanden ist, können wir ihn durch Punkte ersetzen, um die Tabelle nicht zu überladen. Was also tun?

Im Allgemeinen verwenden wir die folgenden Attribute

CSS- CodeInhalt in die Zwischenablage kopieren
  1. /*Überlaufteilstil*/   
  2. .txt-ell {
  3.      weiß Leerzeichen : nowrap ; //Erzwingt die Anzeige in einer Zeile
  4.      overflow : hidden ; //Überlaufenden Inhalt ausschneiden und ausblenden
  5. Textüberlauf : Auslassungspunkte; //Wenn der Inline - Text den Blockcontainer überläuft, ersetzen Sie den Überlaufteil durch ...
  6. word-break:keep- all ; //Zeilenumbrüche innerhalb von Wörtern zulassen
  7.      Farbe : rot ; // Ich werde es hier selbst markieren
  8.      padding : 0 7px ; //Da ich etwas Abstand zum Rand lassen möchte, setze ich folgendes
  9. }
CSS- CodeInhalt in die Zwischenablage kopieren
  1. .Tabelle-Fix {
  2.      Tabellenlayout : behoben ;
  3. }

Zunächst wird der zweite Stil speziell dem Tabellen-Tag hinzugefügt. Wenn Sie einen Inhaltsüberlauf erreichen möchten, muss die Tabelle eine feste Breite und Höhe haben, und die tr und td innerhalb der Tabelle müssen ebenfalls eine feste Breite und Höhe haben. Bevor Sie den Inhaltsüberlauf verwenden, fügen Sie der Tabelle die Klasse „Table-Fix“ hinzu. Überprüfen Sie dann, ob Ihr tr und td eine Breite haben. Wenn nicht, geben Sie am besten eine an. Sie kann fest oder in Prozent angegeben werden. Ich gebe hauptsächlich Prozentsätze an. Die äußere Tabelle hat eine feste Breite und die tr und td im Inneren haben eine prozentuale Breite. Auf diese Weise können Sie den Inhaltsüberlaufstil verwenden. Wenn ein Raster viel Inhalt enthält und Sie Punkte implementieren möchten, fügen Sie diesem Raster schließlich eine .txt-ell-Klasse hinzu.

Der obige Artikel über die Layoutmethode für Inhaltsüberlauf in der Tabelle enthält alle Inhalte, die der Editor mit Ihnen teilt. Ich hoffe, er kann Ihnen als Referenz dienen. Ich hoffe auch, dass Sie 123WORDPRESS.COM unterstützen.

Original-URL: http://www.cnblogs.com/hanyining/archive/2016/05/25/5527668.html

<<:  Detaillierte Erklärung des Responsive-Prinzips von Vue3

>>:  Horizontale und vertikale Zentrierung von DIV und Bildern, kompatibel mit mehreren Browsern

Artikel empfehlen

Allgemeine MySQL-Anweisungen zum Anzeigen von Transaktionen und Sperren

Einige allgemeine Anweisungen zum Anzeigen von Tr...

So installieren und konfigurieren Sie einen FTP-Server in CentOS8.0

Nach der Veröffentlichung von CentOS8.0-1905 habe...

So zeigen Sie JSON-Daten auf einer HTML-Seite an und formatieren sie

JSON-Daten werden auf der HTML-Seite angezeigt un...

Detailliertes Tutorial zur Installation von ElasticSearch 6.x im Docker

Ziehen Sie zuerst das Image (oder erstellen Sie e...

Zusätzliche Anweisungen zur Verwendung von Gettern und Aktionen in Vuex

Vorbemerkungen 1.Unterschiede zwischen Vue2.x und...

Erläuterung der MySQL-Leistungsprüfung durch den Befehl „show processlist“

Der Befehl „show processlist“ ist sehr nützlich. ...

HTML+CSS-Div-Lösung bei Konflikten zwischen relativer und absoluter Breite

Div-Lösung bei Konflikten zwischen relativer und ...

Implementierungscode für den MySQL-Protokolltrigger

SQL-Anweisung DROP-TRIGGER WENN EXISTIERT sys_men...

HTML n Möglichkeiten zum Erreichen eines alternativen Farbcode-Beispielcodes

In diesem Artikel wird hauptsächlich der Beispiel...

Vue implementiert WebSocket-Kundendienst-Chatfunktion

In diesem Artikel wird hauptsächlich die Implemen...

Tutorial zur Installation von phpMyAdmin unter Linux centos7

yum install httpd php mariadb-server –y Notieren ...

Lösung für das Problem, dass MySql immer das mySqlInstallerConsole-Fenster öffnet

MySql öffnet regelmäßig ein MySQLInstallerConsole...