কোনও এইচটিএমএল উপাদানগুলির সামগ্রী ওভারফ্লো হয়েছে কিনা তা নির্ধারণ করুন

Question

যদি কোনও এইচটিএমএল উপাদান এর সামগ্রীতে উপচে পড়েছে তবে আমি কী স্ক্রোলবার নির্বিশেষে পরীক্ষা করতে জাভাস্ক্রিপ্ট ব্যবহার করতে পারি? উদাহরণস্বরূপ, ছোট, স্থির আকারের সাথে একটি দীর্ঘ ডিভ, ওভারফ্লো সম্পত্তিটি দৃশ্যমান হিসাবে সেট করা হয়েছে এবং উপাদানটিতে কোনও স্ক্রোলবার নেই।

Answer 1

সাধারণত এটি সনাক্ত করার জন্য আপনি এর 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;
}

এফএফ 3, এফএফ 40.0.2, আই 6, ক্রোম 0.2.149.30 এ পরীক্ষিত।

Comments

আপনাকে শোগ 9 ধন্যবাদ ... সনাক্তকরণের রুটিনটি হ'ল, আমি মনে করি, আমার কী প্রয়োজন, কারণ আমি ওভারফ্লো (লুকানো / দৃশ্যমান) দিয়ে খেলি

আমার স্ট্যাকওভারফ্লো / প্রশ্নগুলি / ২০২২78787// ২ তে একই প্রশ্ন রয়েছে যেখানে আমি উপাদানটির উপাদানগুলির কী অংশগুলি ওভারফ্লো লুকিয়ে রেখেছি তা বের করার চেষ্টা করছি।

— স্লাইফ

আমি ভাবছি স্টাইলটি সংক্ষেপে পরিবর্তিত হওয়ায় এটি একটি সংক্ষিপ্ত ঝাঁকুনা দেবে কিনা?

— স্টিজন ডি উইট

+1 টি। এটি আধুনিক ব্রাউজারগুলিতে কাজ করে (কমপক্ষে ক্রোম 40 এবং এই লেখার সময় থেকে অন্যান্য বর্তমান সংস্করণ ব্রাউজার সহ)।

— L0j1k

এমএস এজ এ কাজ করে না। কখনও কখনও সামগ্রীতে উপচে পড়া হয় না clientWidthএবং scrollWidth1px দ্বারা পৃথক হয়।

— জেস্পার

Answer 2

তুলনা করার চেষ্টা করুন 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। স্ক্রোলউইথ
http://developer.mozilla.org/en/DOM/element.scrolHeight

Answer 3

আমি উত্তরটি নিখুঁত বলে মনে করি না। কখনও কখনও পাঠ্য ওভারফ্লো হলেও স্ক্রোলউইথ / ক্লায়েন্টউইথ / অফসেটউইথ একই হয় are

এটি ক্রোমে ভাল কাজ করে তবে আইই এবং ফায়ারফক্সে নয়।

শেষ পর্যন্ত, আমি এই উত্তরটি চেষ্টা করেছি: এইচটিএমএল পাঠ্য-ওভারফ্লো উপবৃত্ত সনাক্তকরণ

এটি নিখুঁত এবং যে কোনও জায়গায় ভাল কাজ করে। সুতরাং আমি এটি চয়ন করি, আপনি চেষ্টা করতে পারেন, আপনি হতাশ করবেন না।

Comments

আমি এই উত্তরটি সরিয়ে ফেলতে বা অনাবৃত করার পরামর্শ দিই, কারণ এতে কিছু ত্রুটি রয়েছে। আমি প্রথমে এটি ব্যবহার করি তবে এটি কিছু বিশেষ সিএসএস শৈলীর সাথে নিখুঁতভাবে কাজ করতে পারে না।

— zjalex

Answer 4

আর একটি উপায় হল উপাদানটির প্রস্থকে তার পিতামাতার প্রস্থের সাথে তুলনা করা:

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

    return elemWidth > parentWidth
}

Answer 5

JQuery দিয়ে আপনি করতে পারেন:

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

    console.log("element is overflowing");

} else {

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

}

পরিবর্তন .prop('scrollWidth')এবং .width()যদি প্রয়োজন হয়।

Answer 6

এটি একটি জাভাস্ক্রিপ্ট সমাধান (মটুলগুলি সহ) যা এলএইডারের সীমানায় ফিট করার জন্য ফন্টের আকারকে হ্রাস করবে।

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

এলহাইডারের সিএসএস:

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

নোট করুন এলএইডারের মোড়ক এলহাইডারের প্রস্থ নির্ধারণ করে।