Bagaimanakah Saya Boleh Mengesan Limpahan Kandungan dalam Elemen HTML?

Mengesan Limpahan Kandungan dalam Elemen HTML

Dalam situasi di mana kandungan dalam elemen melangkaui saiz yang ditetapkan, ia menjadi penting untuk menentukan sama ada elemen melimpah. Ini amat berguna untuk melaksanakan fungsi seperti menunjukkan butang tambahan apabila kandungan dilimpahi.

Fungsi yang disediakan, isOverflown(elemen), menawarkan pendekatan yang mudah untuk tugas ini. Ia menilai scrollHeight dan scrollWidth sesuatu elemen berbanding clientHeight dan clientWidthnya. Jika salah satu daripada nilai ini melebihi nilai sejawatannya, ia menunjukkan bahawa elemen itu melimpah.

function isOverflown(element) {
  return element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth;
}

Fungsi ini boleh digunakan dalam pelbagai aplikasi, termasuk:

1. Melaraskan saiz elemen secara automatik berdasarkan panjang kandungan.
2. Memaparkan penunjuk limpahan (cth., bar skrol atau butang).
3. Meningkatkan pengalaman pengguna dengan menyediakan konteks tambahan apabila kandungan dipotong.

Sampel kod berikut menunjukkan penggunaan fungsi isOverflown:

var els = document.getElementsByClassName('demos');
for (var i = 0; i < els.length; i++) {
  var el = els[i];
  el.style.borderColor = (isOverflown(el) ? 'red' : 'green');
  console.log("Element #" + i + " is " + (isOverflown(el) ? '' : 'not ') + "overflown.");
}

CSS boleh digunakan untuk menggayakan elemen untuk demonstrasi tujuan:

.demos {
  white-space: nowrap;
  overflow: hidden;
  width: 120px;
  border: 3px solid black;
}

HTML:

<div class='demos'>This is some text inside the div which we are testing</div>
<div class='demos'>This is text.</div>

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengesan Limpahan Kandungan dalam Elemen HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!