HTML öğesinin içeriğinin aşılıp aşılmadığını belirleme

136

Bir HTML öğesinin içeriğinden taşmış olup olmadığını kontrol etmek için (kaydırma çubuklarına bakılmaksızın) JavaScript kullanabilir miyim? Örneğin, küçük, sabit boyutlu, taşma özelliği görünür olarak ayarlanmış ve öğede kaydırma çubuğu olmayan uzun bir div.

javascript html css

— Barett
kaynak

217

Normalde, bunu algılamak için client[Height|Width]ile karşılaştırılabilir scroll[Height|Width]... ancak taşma görünür olduğunda değerler aynı olacaktır. Bu nedenle, bir tespit rutini aşağıdakileri dikkate almalıdır:

// 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;
}

FF3, FF40.0.2, IE6, Chrome 0.2.149.30'da test edilmiştir.

— Shog9
kaynak

teşekkür ederim Shog9 ... algılama rutini, bence, ne gerekli, çünkü taşma ile oynamak (gizli / görünür)

Benzer bir sorum var stackoverflow.com/questions/2023787/… burada içeren öğenin hangi bölümlerinin taşma gizli olduğunu anlamaya çalışıyorum.

— slolife

2

Stil kısaca değiştikçe bunun kısa bir titreme mi yapılacağını merak ediyorum.

— Stijn de Witt

3

+1. Bu, modern tarayıcılarda çalışır (bu yazıdan itibaren en az Chrome 40 ve diğer mevcut sürüm tarayıcıları dahil).

— L0j1k

1

MS Edge'de çalışmaz. Bazen içerik ancak taşan değildir clientWidthve scrollWidthfarklılık 1px tarafından.

— jesper

11

Karşılaştırmayı deneyin element.scrollHeight/ element.scrollWidthiçin 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
kaynak

2

Bu cevabın mükemmel olduğunu düşünmüyorum. Bazen, metin taşmasına rağmen scrollWidth / clientWidth / offsetWidth aynıdır.

Bu Chrome'da iyi çalışır, ancak IE ve Firefox'ta çalışmaz.

Sonunda, bu yanıtı denedim: HTML metin taşması üç nokta algılama

Mükemmel ve her yerde iyi çalışıyor. Bu yüzden bunu seçiyorum, belki deneyebilirsiniz, hayal kırıklığına uğramayacaksınız.

— zjalex
kaynak

Bu yanıtı kaldırmanızı veya kaldırmanızı öneririm, çünkü bazı kusurları var. İlk başta bunu kullanıyorum, ancak bazı özel css stilleriyle mükemmel çalışamıyor.

— zjalex

1

Başka bir yol, öğe genişliğini üst öğesinin genişliğiyle karşılaştırmaktır:

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

    return elemWidth > parentWidth
}

— Alisson Nunes
kaynak

0

JQuery ile şunları yapabilirsiniz:

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

    console.log("element is overflowing");

} else {

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

}

Gerekirse .prop('scrollWidth')ve .width()gerekirse değiştirin .

— Agu Dondo
kaynak

-2

Bu, yazı tipi boyutunu elHeader sınırlarına sığacak şekilde küçülten bir javascript çözümüdür (Mootools ile).

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

ElHeader'ın CSS'si:

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

ElHeader'ın sarmalayıcısının elHeader'ın genişliğini ayarladığına dikkat edin.

— user945389
kaynak