ตรวจสอบว่าเนื้อหาขององค์ประกอบ HTML ล้นหรือไม่

ฉันสามารถใช้ JavaScript เพื่อตรวจสอบ (โดยไม่คำนึงถึงแถบเลื่อน) ได้หรือไม่หากองค์ประกอบ HTML ล้นเนื้อหา ตัวอย่างเช่น div ยาวที่มีขนาดเล็กคงที่คุณสมบัติ overflow ตั้งค่าให้มองเห็นได้และไม่มีแถบเลื่อนบนองค์ประกอบ

โดยปกติคุณสามารถเปรียบเทียบclient[Height|Width]กับscroll[Height|Width]เพื่อตรวจจับสิ่งนี้ ... แต่ค่าจะเท่ากันเมื่อมองเห็นล้น ดังนั้นขั้นตอนการตรวจจับต้องคำนึงถึงสิ่งนี้:

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

ลองเปรียบเทียบelement.scrollHeight/ element.scrollWidthถึง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

ฉันไม่คิดว่าคำตอบนี้จะสมบูรณ์แบบ บางครั้ง scrollWidth / clientWidth / offsetWidth เหมือนกันแม้ว่าข้อความจะล้น

ใช้งานได้ดีใน Chrome แต่ใช้ไม่ได้กับ IE และ Firefox

ในที่สุดฉันลองใช้คำตอบนี้: การตรวจจับจุดไข่ปลา HTML text-overflow

มันสมบูรณ์แบบและใช้งานได้ดีทุกที่ ฉันจึงเลือกสิ่งนี้บางทีคุณอาจลองดูคุณจะไม่ผิดหวัง

อีกวิธีหนึ่งคือเปรียบเทียบความกว้างขององค์ประกอบกับความกว้างของผู้ปกครอง:

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

    return elemWidth > parentWidth
}

ด้วย jQuery คุณสามารถทำได้:

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

    console.log("element is overflowing");

} else {

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

}

เปลี่ยนเป็น.prop('scrollWidth')และ.width()ถ้าจำเป็น

นี่คือโซลูชัน javascript (พร้อม Mootools) ที่จะลดขนาดฟอนต์ให้พอดีกับขอบเขตของ 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 ของ elHeader:

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

สังเกตว่า wrapper ของ elHeader ตั้งค่าความกว้างของ elHeader