Tentukan apakah konten elemen HTML meluap

139

Dapatkah saya menggunakan JavaScript untuk memeriksa (terlepas dari scrollbar) jika elemen HTML telah meluap kontennya? Misalnya, div panjang dengan ukuran tetap kecil, properti overflow disetel ke terlihat, dan tidak ada bilah gulir pada elemen.

javascript html css

— Barett
sumber

222

Biasanya, Anda dapat membandingkan client[Height|Width]dengan scroll[Height|Width]untuk mendeteksi ini ... tetapi nilainya akan sama ketika luapan terlihat. Jadi, rutinitas deteksi harus memperhitungkan hal ini:

// Determines if the passed element is overflowing its bounds,
// either vertically or horizontally.
// Will temporarily modify the "overflow" style to detect this
// if necessary.
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;
}

Diuji di FF3, FF40.0.2, IE6, Chrome 0.2.149.30.

— Shog9
sumber

terima kasih Shog9 ... rutinitas pendeteksian, saya pikir, apa yang saya butuhkan, karena saya bermain dengan overflow (tersembunyi / terlihat)

Saya memiliki pertanyaan serupa di stackoverflow.com/questions/2023787/… di mana saya mencoba untuk mencari tahu bagian mana dari elemen yang mengandung telah meluap tersembunyi.

— slolife

2

Saya ingin tahu apakah ini akan memberikan kedipan singkat karena gayanya diubah sebentar?

— Stijn de Witt

3

+1. Ini berfungsi di browser modern (termasuk setidaknya Chrome 40 dan browser versi terbaru lainnya sejak tulisan ini dibuat).

— L0j1k

1

Tidak berfungsi di MS Edge. Kadang-kadang konten tidak meluap tapi clientWidthdan scrollWidthberbeda dengan 1px.

— jesper

13

Coba bandingkan element.scrollHeight/ element.scrollWidthdengan element.offsetHeight/element.offsetWidth

http://developer.mozilla.org/en/DOM/element.offsetWidth
http://developer.mozilla.org/en/DOM/element.offsetHeight
http://developer.mozilla.org/en/DOM/element. scrollWidth
http://developer.mozilla.org/en/DOM/element.scrollHeight

— Chris MacDonald
sumber

3

Saya rasa jawaban ini tidak sempurna. Terkadang scrollWidth / clientWidth / offsetWidth sama meskipun teksnya meluap.

Ini berfungsi dengan baik di Chrome, tetapi tidak di IE dan Firefox.

Akhirnya, saya mencoba jawaban ini: deteksi elipsis luapan teks HTML

Ini sempurna dan bekerja dengan baik di mana saja. Jadi saya memilih ini, mungkin Anda bisa mencoba, Anda tidak akan mengecewakan.

— zjalex.dll
sumber

Saya sarankan untuk menghapus atau membatalkan suara jawaban ini, karena ada beberapa kekurangan. Saya menggunakan ini pada awalnya, tetapi tidak dapat bekerja sempurna dengan beberapa gaya css khusus.

— zjalex

1

Cara lain adalah membandingkan lebar elemen dengan lebar induknya:

function checkOverflow(elem) {
    const elemWidth = elem.getBoundingClientRect().width
    const parentWidth = elem.parentElement.getBoundingClientRect().width

    return elemWidth > parentWidth
}

— Alisson Nunes
sumber

0

Dengan jQuery, Anda dapat melakukan:

if ( $(".inner-element").prop('scrollHeight') > $(".inner-element").height() ) {

    console.log("element is overflowing");

} else {

    console.log("element is not overflowing");

}

Ubah ke .prop('scrollWidth')dan .width()jika perlu.

— Agu Dondo
sumber

-2

Ini adalah solusi javascript (dengan Mootools) yang akan mengurangi ukuran font agar sesuai dengan batasan elHeader.

while (elHeader.clientWidth < elHeader.scrollWidth || elHeader.clientHeight < elHeader.scrollHeight) {
  var f = parseInt(elHeader.getStyle('font-size'), 10);
  f--;
  elHeader.setStyle('font-size', f + 'px');
}

CSS dari elHeader:

    width:100%;
    font-size:40px;
    line-height:36px;
    font-family:Arial;
    text-align:center;
    max-height:36px;
    overflow:hidden;

Perhatikan bahwa pembungkus elHeader menyetel lebar elHeader.

— pengguna945389
sumber