Rumah > hujung hadapan web > tutorial css > Bagaimana Mengesan Kandungan Melimpah dalam Elemen HTML dengan Amanah?

Bagaimana Mengesan Kandungan Melimpah dalam Elemen HTML dengan Amanah?

Barbara Streisand
Lepaskan: 2024-12-24 14:16:10
asal
495 orang telah melayarinya

How to Reliably Detect Overflowing Content in HTML Elements?

Mengesan Kandungan Limpahan dalam Elemen HTML

Menentukan sama ada kandungan elemen HTML telah melebihi hadnya boleh menjadi tugas biasa semasa mereka bentuk halaman web. Walau bagaimanapun, kaedah standard untuk membandingkan dimensi klien dengan dimensi tatal tidak selalu berfungsi apabila limpahan ditetapkan kepada kelihatan, kerana nilainya akan sama.

Untuk mengatasi isu ini, fungsi JavaScript yang disediakan mengubah suai CSS buat sementara waktu tetapan limpahan kepada tersembunyi. Ini membolehkan kami mengesan dengan tepat sama ada elemen itu benar-benar melimpahi batasnya, sama ada secara menegak atau mendatar. Berikut ialah kodnya:

function checkOverflow(el) {
   var curOverflow = el.style.overflow;

   if ( !curOverflow || curOverflow === "visible" )
      el.style.overflow = "hidden";

   var isOverflowing = el.clientWidth < el.scrollWidth 
      || el.clientHeight < el.scrollHeight;

   el.style.overflow = curOverflow;

   return isOverflowing;
}
Salin selepas log masuk

Fungsi ini telah diuji dalam penyemak imbas utama, termasuk Firefox, Internet Explorer dan Chrome, memastikan ia berfungsi secara konsisten merentas platform. Dengan memanfaatkan teknik ini, anda kini boleh menyemak dengan mudah sama ada kandungan elemen HTML melimpahi ruang yang diperuntukkan, tanpa mengira keterlihatan bar skrol.

Atas ialah kandungan terperinci Bagaimana Mengesan Kandungan Melimpah dalam Elemen HTML dengan Amanah?. 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