Mengapa `overflow: hidden` Tidak Berfungsi dalam Sel Jadual Saya ()?

Limpahan Tidak Berfungsi dalam : Pembetulan CSS

Limpahan:tersembunyi mungkin tidak berfungsi seperti yang diharapkan dalam

Inti masalah terletak pada gelagat lalai elemen jadual. Jadual biasanya menggunakan susun atur bendalir, di mana lebar sel mengembang dan mengecut berdasarkan kandungan. Untuk mengatasi ini, kita mesti menentukan reka letak jadual tetap:

table {
  table-layout: fixed;
}

Selain itu, menetapkan lebar tetap pada bekas meja mengehadkan saiz keseluruhan yang tersedia pada sel jadual:

table {
  ...
  width: 200px;  

Akhir sekali, untuk benar-benar mengekang kandungan sel, kami menggunakan overflow:hidden pada sel jadual dan white-space: nowrap untuk menghalang perkataan balut:

td {
  ...
  overflow: hidden;
  white-space: nowrap;
}

Tweak gabungan ini memastikan kandungan teks dipotong di tepi sel, menghalangnya daripada melimpah.

Contoh

Pertimbangkan ini diubah suai contoh:

<table>

Kini, teks akan dipotong pada lebar sel 100px, seperti yang dikehendaki.

Atas ialah kandungan terperinci Mengapa `overflow: hidden` Tidak Berfungsi dalam Sel Jadual Saya ()?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!