So gehen Sie mit einem Inhaltsüberlauf in der Tabelle um

Dieses Mal zeige ich Ihnen, wie Sie mit dem Überfluss an Inhalten in der Tabelle umgehen. Was sind die Vorsichtsmaßnahmen für den Umgang mit dem Überfluss an Inhalten in der Tabelle? Schauen Sie mal rein.

Was ist Content Overflow? Wenn viel Text vorhanden ist und der Inhaltsbereich nur so lang ist, wird der zusätzliche Teil tatsächlich durch Punkte ersetzt.

Der Fall, den wir dieses Mal bearbeiten, ist eine Tabelle. Wir wissen, dass die Tabelle unübersichtlich wird, wenn wir zu viel Text eingeben eingewickelt. Aber manchmal möchten wir es in einer Zeile mit fester Breite anzeigen. Wenn der zusätzliche Teil durch Punkte ersetzt wird, wird die Tabelle dadurch nicht überfüllt. Was also tun?

Im Allgemeinen verwenden wir die folgenden Attribute

/*溢出部分样式*/  
.txt-ell {   
    whitewhite-space:nowrap;  //强制在一行显示   
    overflow:hidden;    //溢出的内容切割隐藏   
    text-overflow:ellipsis; //当内联溢出块容器时，将溢出部分替换为…   
    word-break:keep-all;  //允许在单词内换行   
    color: red;  //这里我自己标识一下   
    padding: 0 7px;  //由于想跟边线留有距离，所以设置了下   
}

.table-fix {   
    table-layout:fixed;     
}

Zunächst wird der zweite Stil speziell zum Tabellen-Tag hinzugefügt, wenn Sie einen Inhaltsüberlauf erreichen möchten. Die Tabelle muss eine feste Breite und Höhe haben, tr und td innerhalb der Tabelle müssen ebenfalls eine feste Breite und Höhe haben. Bevor Sie den Inhaltsüberlauf verwenden, müssen Sie zunächst die Table-Fix-Klasse zur Tabelle hinzufügen. Überprüfen Sie dann, ob Ihre tr und td eine bestimmte Breite haben. Wenn nicht, geben Sie ihnen am besten eine feste Breite oder einen Prozentsatz an. Die äußere Tabelle hat eine feste Breite und die tr und td darin ist die prozentuale Breite, damit der Inhaltsüberlaufstil verwendet werden kann. Wenn sich schließlich in einem Raster viel Inhalt befindet und Sie ein wenig erreichen möchten, fügen Sie einfach eine .txt-ell-Klasse zu diesem Raster hinzu

Ich glaube, Sie haben die Methode nach dem Lesen dieser Fälle gemeistert. Und es wird noch mehr spannende Dinge geben. Bitte beachten Sie andere verwandte Artikel auf der chinesischen PHP-Website!

Verwandte Lektüre:

HTML-Grundkenntnisse, detaillierte Einführung in den Stil der Hyperlink-Einstellungen

Wissenszusammenfassung von HTML-Absätzen

Wissenszusammenfassung zum HTML-Textformat

Das obige ist der detaillierte Inhalt vonSo gehen Sie mit einem Inhaltsüberlauf in der Tabelle um. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!