Heim > Web-Frontend > HTML-Tutorial > Das TD für die Webseitenproduktion kann auch überlaufen und die Seitenproduktion display_HTML/Xhtml_Web ausblenden

Das TD für die Webseitenproduktion kann auch überlaufen und die Seitenproduktion display_HTML/Xhtml_Web ausblenden

WBOY
Freigeben: 2016-05-16 16:42:15
Original
2005 Leute haben es durchsucht

Sobald ich diesem Artikel einen solchen Namen gebe, wird sich vielleicht jemand fragen: Warum achten Sie immer noch auf Tabelle? Es ist bereits veraltet ... Beeilen Sie sich, Xhtml ... div ist gut ... ul ist gut. .. ol ist gut... dl ist gut... es ist vorbei, nein. Es ist besser zu wissen, was sonst noch passiert.

Ist die Tabelle wirklich veraltet? Verstehst du Tisch wirklich? Wissen Sie wirklich, wie man Tabellen verwendet?

Wortgefechte sind nicht das, was wir tun wollen, überlassen Sie es denen, die viel Zeit haben.

Zurück zum Thema:

Ich kann mich nicht erinnern, wann jemand eine Tabelle zur Simulation des DataGrid verwendet und gefragt hat, warum der Text im td, der die feste Breite überschreitet, nicht ausgeblendet werden kann, aber wird direkt wickeln?

Ja, das ist tatsächlich der Fall, wie zum Beispiel:



Tipp: Sie können einen Teil des Codes ändern, bevor Sie ausführen
Führen Sie den obigen Code aus und Sie werden feststellen, dass der Text in der Zelle, der die feste Breite überschreitet, nicht ausgeblendet, sondern in einer neuen Zeile angezeigt wird. Dies ist offensichtlich nicht meine Absicht.

Es scheint, dass dies eine Funktion der Tabelle ist. Sie kann die Kombination von {width:*px;white-space:nowrap;overflow:hidden;} nicht gut unterstützen -space: nowrap funktioniert nicht, daher scheint overflow:hidden ungültig zu sein. {Hinweis: Wenn es sich um eine Reihe bedeutungsloser Zeichen handelt, kann es zum Beispiel wirksam werden: & lt; also werden a's, die die Breite von .col1 überschreiten, ausgeblendet}

 [Lösung 1:]

Später wird erwähnt, dass die Verwendung der prozentualen Breite ausreicht. Nach dem Testen ist dies tatsächlich möglich. Ändern Sie den Stil einiger Zeilen im ersten Absatz leicht und lassen Sie die anderen unverändert:

.col1 {width:20%;}
.col2 {width:40%;}
.col3 {width:40%;}

Nachdem Sie den geänderten Code ausgeführt haben, werden Sie feststellen, dass der Text, der die Breite überschreitet, tatsächlich ausgeblendet ist. Der Effekt scheint erzielt zu werden.

Tatsächlich kann die Verwendung einer prozentualen Breite das Problem des Ausblendens von Text lösen, aber dies scheint nicht die beste Lösung zu sein, da wir manchmal eine feste Breite und keine prozentuale Breite benötigen.

Der Grund dafür ist, wie man den Text in der Zelle in einer Zeile ohne Umbruch anzeigt.

 [Lösung 2:]

Um diese Anforderung zu erfüllen, können wir uns neben der Verwendung von Stilen auch ein Tag vorstellen, das schon lange nicht mehr verwendet wird Die Funktion dieses Elements besteht darin, die Anzeige des Inhalts in einer Zeile zu erzwingen. Nehmen Sie die folgenden Änderungen am obigen Code vor und lassen Sie alles andere unverändert:



;nobr> ; Eleganter Q400N, mit Intel Core2 Duo (Merom) T5450 (1,66G) Prozessor
tatsächlich erreicht, ist es Zeit, aufgeregt zu sein? Nein, das scheint nicht die beste Lösung zu sein, denn schließlich ist es etwas unangenehm, ein Element-Tag zu verwenden, das schon lange nicht mehr verwendet wurde und nicht empfohlen wird.

Dieser Idee folgend betrachtete ich dieses Problem aus einem anderen Blickwinkel und stellte fest, dass das Problem leicht zu lösen war.

Da wir in einer Zelle mit fester Breite nicht einfach „white-space:nowrap“ zu th und td hinzufügen können, was wäre, wenn wir der Zelle mit fester Breite ein Markierungselement hinzufügen würden?

Beste Lösung:



提示:您可以先修改部分代码再运行

  运行上面的代码,会发现这样的做法是可以的,而且从代码的简洁性、可读性和合理性几方面来说,都较前几种方案为好。

  {还没有做过给单元格隐藏超过固定宽度内容的同学,可先在机器上玩玩,然后再来看本文}

  其实table是一个有趣,可玩性很高东东。我们不应该带着有色眼睛去看它,因为它有它存在的道理。

  之后会继续写一些关于table的文章,也作自娱之用。
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
Shenzhou Elegant Q400N Centrino 4-Plattform, hervorragend Tolles Preis-Leistungs-Verhältnis, schönes Aussehen