Mengapa `overflow: hidden` Tidak Berfungsi dalam Sel Jadual dan Bagaimana Saya Boleh Membetulkannya?

Mengapa Limpahan Tidak Berfungsi dalam Sel Jadual

Dalam cuba mengehadkan lebar sel jadual, limpahan : sifat tersembunyi sering gagal menghalang jadual daripada berkembang dengan rentetan teks yang tidak dijarakkan. Isu ini boleh diselesaikan dengan melaksanakan gabungan sifat CSS pada jadual dan elemen sel jadual.

Penyelesaian:

Untuk memotong teks di tepi sel jadual, bukannya mengembang sel, gunakan sifat berikut:

• Jadual Elemen:

  • susun atur jadual: tetap

• Elemen Sel Jadual:

  • limpahan: tersembunyi
  • ruang putih: nowrap

Contoh:

Di bawah ialah contoh dikemas kini yang menunjukkan penggunaan yang betul bagi sifat ini:

 saiz kotak: kotak sempadan;<br>}<br>jadual {<br> susun atur jadual: tetap;<br> runtuh sempadan: runtuh; <br> lebar: 200px;<br>}<br>td {<br> latar belakang: #F00;<br> pelapik: 20px;<br> limpahan: tersembunyi;<br> ruang putih: nowrap;<br> sempadan: pepejal 1px #000;<br> lebar: 100%;<br>} </pra><br><pra> <tbody></p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><tr>
  <td>
    This_is_a_terrible_example_of_thinking_outside_the_box.
  </td>
</tr>

Salin selepas log masuk

Tambahan Pertimbangan:

Perhatikan bahawa lebar elemen jadual hendaklah dinyatakan dengan jelas untuk memastikan ia sama atau lebih kecil daripada sel lebar tetap.

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