Rumah > hujung hadapan web > tutorial css > Mengapa `overflow: hidden` Tidak Berfungsi pada `` Elemen untuk Memotong Teks?

Mengapa `overflow: hidden` Tidak Berfungsi pada `` Elemen untuk Memotong Teks?

Susan Sarandon
Lepaskan: 2024-12-12 14:04:09
asal
343 orang telah melayarinya

Why Doesn't `overflow: hidden` Work on a `` Element to Truncate Text?

Limpahan Tersembunyi Tidak berkesan dalam ?

Masalah:
A sel bertujuan untuk mempunyai limpahan lebar tetap dengan teks berlebihan, mengembangkan sempadan sel.

Penyelesaian:
Untuk menguatkuasakan pemotongan teks dalam sel, gabungan sifat CSS diperlukan.

  1. susun atur jadual: tetap

    • Memastikan lebar jadual kekal statik.
  2. limpahan: tersembunyi pada

    • Sembunyi melimpah teks.
  3. ruang putih: nowrap pada

    • Menghalang teks daripada dibungkus dalam sel.

Contoh (Lajur Lebar Tetap):


 saiz kotak: border-box;<br>}<br>jadual {<br> susun atur jadual: tetap;<br> runtuh sempadan: runtuh;<br> lebar: 100%;<br> lebar maks: 100px;<br>}<br>td {<br> latar belakang: #F00;<br> pelapik: 20px;<br> limpahan: tersembunyi; <br> ruang putih: nowrap;<br> lebar: 100px;<br> sempadan: pepejal 1px #000;<br>}

 <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>
<tr>
  <td>
    This_is_a_terrible_example_of_thinking_outside_the_box.
  </td>
</tr>
Salin selepas log masuk



Atas ialah kandungan terperinci Mengapa `overflow: hidden` Tidak Berfungsi pada `` Elemen untuk Memotong Teks?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan