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

php中世界最好的语言
Freigeben: 2018-01-23 10:25:20
Original
4194 Leute haben es durchsucht

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;  //由于想跟边线留有距离,所以设置了下   
}
Nach dem Login kopieren
.table-fix {   
    table-layout:fixed;     
}
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!