এইচটিএমএল পাঠ্য-ওভারফ্লো উপবৃত্ত সনাক্তকরণ

Question

আমার একটি পৃষ্ঠায় ব্লক উপাদানগুলির সংকলন রয়েছে। তাদের সকলের সিএসএসের নিয়ম রয়েছে সাদা-স্থান, ওভারফ্লো, পাঠ্য-ওভারফ্লো সেট যাতে উপচে পড়া পাঠ্য ছাঁটাই হয় এবং একটি উপবৃত্ত ব্যবহার হয়।

তবে সব উপাদানই ওভারফ্লো হয় না।

কোন উপাদানগুলি উপচে পড়েছে তা সনাক্ত করতে আমি কি জাভাস্ক্রিপ্ট ব্যবহার করতে পারি?

ধন্যবাদ।

যোগ করা হয়েছে: উদাহরণস্বরূপ এইচটিএমএল স্ট্রাকচারের সাথে আমি কাজ করছি।

<td><span>Normal text</span></td>
<td><span>Long text that will be trimmed text</span></td>

স্প্যান উপাদানগুলি সর্বদা কোষগুলিতে ফিট করে, তাদের উপবৃত্তির নিয়ম প্রয়োগ রয়েছে। স্প্যানের পাঠ্য সামগ্রীতে যখন উপবৃত্তটি প্রয়োগ করা হয় তখন আমি তা সনাক্ত করতে চাই।

Comments

সদৃশ: stackoverflow.com/questions/143815/...

— jantimon

নকল নয়! এই প্রশ্নটি অন্য মৌলিক উপাদানগুলির মধ্যে একটি উপাদান সম্পর্কে। আমি একক উপাদানের মধ্যে পাঠ্য সম্পর্কে কথা বলছি। আমার ক্ষেত্রে, টিডির স্প্যান টিডি কখনই উপচে যায় না, এটি স্প্যানের মধ্যে থাকা পাঠ্যটি উপচে পড়ে এবং ছাঁটা হয়ে যায়। এটাই আমি সনাক্ত করার চেষ্টা করছি! দুঃখিত - আমি স্বীকার করি এই প্রশ্নটি আরও ভাল করে বলতে পারতাম।

— deanoj

ওহ, আমি যোগ করতে ভুলে গেছি

— এটির

আমি ঘোমকে কাজটি করেছি কিনা তা দেখার জন্যই করলাম ... তা হয়নি।

— deanoj

উপবৃত্তাকার দিকটি অপ্রাসঙ্গিক; আপনার যা যা সনাক্ত করা দরকার তা হ'ল এটি উপচে পড়েছে কিনা।

— স্পুডলি

Answer 1

একসময় আমার এটি করা দরকার ছিল এবং আমি একমাত্র ক্রস-ব্রাউজারের নির্ভরযোগ্য সমাধানটি পেয়েছিলাম হ্যাক জব। আমি এর মতো সমাধানের সবচেয়ে বড় অনুরাগী নই, তবে এটি অবশ্যই আবার সঠিক ফলাফল সময় এবং সময় উত্পন্ন করে।

ধারণাটি হ'ল আপনি উপাদানটি ক্লোন করেছেন, যে কোনও চৌম্বক প্রস্থ সরিয়ে ফেলবেন এবং ক্লোন করা উপাদানটি মূলের চেয়ে আরও প্রশস্ত কিনা তা পরীক্ষা করুন। যদি তা হয় তবে আপনি জানেন যে এটি কেটে গেছে।

উদাহরণস্বরূপ, jQuery ব্যবহার করে:

var $element = $('#element-to-test');
var $c = $element
           .clone()
           .css({display: 'inline', width: 'auto', visibility: 'hidden'})
           .appendTo('body');

if( $c.width() > $element.width() ) {
    // text was truncated. 
    // do what you need to do
}

$c.remove();

এটি প্রদর্শনের জন্য আমি একটি জেএসফিডাল তৈরি করেছি, http://jsfiddle.net/cgzW8/2/

এমনকি আপনি jQuery এর জন্য নিজস্ব কাস্টম সিউডো-সিলেক্টর তৈরি করতে পারেন:

$.expr[':'].truncated = function(obj) {
  var $this = $(obj);
  var $c = $this
             .clone()
             .css({display: 'inline', width: 'auto', visibility: 'hidden'})
             .appendTo('body');

  var c_width = $c.width();
  $c.remove();

  if ( c_width > $this.width() )
    return true;
  else
    return false;
};

তারপরে এটি উপাদান খুঁজে পেতে ব্যবহার করুন

$truncated_elements = $('.my-selector:truncated');

ডেমো: http://jsfiddle.net/cgzW8/293/

আশা করি এটি হ্যাকি যেমনটি সহায়তা করে তেমন

Comments

@ লৌরি নো; সিএসএস ছাঁটাই বাক্সে প্রকৃত পাঠ্য পরিবর্তন করে না , তাই সামগ্রীটি কাটা, দৃশ্যমান বা লুকানো হোক না কেন সামগ্রী সর্বদা একই থাকে। ছাঁটাই হওয়া পাঠ্যটি এখনও প্রোগ্র্যাম্যাটিকভাবে পাওয়ার কোনও উপায় নেই, যদি সেখানে থাকে তবে আপনাকে প্রথমে উপাদানটি ক্লোন করার দরকার নেই!

— খ্রিস্টান

দেখে মনে হচ্ছে যে যেখানে পরিস্থিতি নেই সেখানে এটি কাজ করবে না white-space: nowrap।

— জাকুব হাম্পল

আমি অবশ্যই বলতে পারি যে ইন্টারনেটে প্রচুর অনুসন্ধানের পরে এবং অনেকগুলি সমাধানের প্রয়োগ করার চেষ্টা করেছি, এটি এখন পর্যন্ত আমার সবচেয়ে নির্ভরযোগ্য একটি found এই দ্রবণটি এলিমিন.ইন.আরউইথ বা এলিমেন্টের মতো ব্রাউজারগুলির মধ্যে বিভিন্ন ফলাফল দেয় না ffঅফসেটউইথ যা মার্জিন বা প্যাডিং ব্যবহার করার সময় সমস্যা আছে .. দুর্দান্ত সমাধান, ভাল।

— স্ক্রিপ্ট

আমার জন্য, এটি কোথাও কার্যকর হয়নি। আমি নিশ্চিত নই, এটি সিএসএসের উপর কীভাবে নির্ভর করে (আমি এটি ইনপুট নিয়ন্ত্রণগুলিতে ব্যবহারের চেষ্টা করেছি, নীচের সমাধানগুলি কমপক্ষে ক্রোম এবং ফায়ারফক্সে (তবে আইই 11 তে নয়) কাজ করেছে ...

— আলেকজান্ডার

দুর্দান্ত সমাধান, বিশেষত jQuery সিউডো-নির্বাচক ব্যবহার করে। তবে কখনও কখনও কাজ করতে পারে না, কারণ উপাদান পাঠ্যের আলাদা স্টাইল থাকলে (প্রস্থের আকার, বর্ণের ব্যবধান, অভ্যন্তরের উপাদানগুলির মার্জিন) প্রস্থটি ভুলভাবে গণনা করা হয়। সেক্ষেত্রে আমি ক্লোন উপাদানটি 'বডি' এর পরিবর্তে $ this.parent () এ যুক্ত করার পরামর্শ দেব। এটি উপাদানটির সঠিক কপি দেবে এবং গণনাগুলি সঠিক হবে। যাইহোক ধন্যবাদ

— অ্যালেক্স

Answer 2

যুক্তি হিসাবে স্প্যান উপাদানটি পাস করে এই জেএস ফাংশনটি ব্যবহার করে দেখুন:

function isEllipsisActive(e) {
     return (e.offsetWidth < e.scrollWidth);
}

Comments

এটি উত্তরটি হওয়া উচিত - খুব মার্জিত এবং ক্রোম এবং আইই (9) এ কাজ করে

— রায় ট্রুইলোভ

এই উত্তর এবং অ্যালেক্সের উত্তর আই 8 তে কাজ করবে না; কিছু অদ্ভুত কেস রয়েছে যেখানে স্ক্রোলের প্রস্থ এবং বহির্মুখগুলি একই ... তবে এর উপবৃত্ত রয়েছে, এবং তারপরে কিছু ক্ষেত্রে যেখানে সেগুলি একই ... এবং কোনও উপবৃত্তও নেই। অন্য কথায়, প্রথম সমাধানটি হ'ল একমাত্র সমস্ত ব্রাউজার জুড়ে কাজ করে।

: যারা offsetWidth, scrollWidth এবং clientWidth বুঝতে হবে, এখানে একটি খুব ভাল ব্যাখ্যা stackoverflow.com/a/21064102/1815779

— Linh বাঁধ

উপর text-overflow:ellipsisএটি হওয়া উচিতe.offsetWidth <= e.scrollWidth

— oriadam

তারা নমনীয় বাচ্চাদের ক্ষেত্রে সর্বদা একে অপরের সমান এবং এভাবে তাদের পক্ষে কাজ করবে না।

— কেভিন বিয়াল

Answer 3

ইটালোর উত্তরে যুক্ত করা, আপনি jQuery ব্যবহার করে এটিও করতে পারেন।

function isEllipsisActive($jQueryObject) {
    return ($jQueryObject.width() < $jQueryObject[0].scrollWidth);
}

এছাড়াও, স্মোকি যেমন উল্লেখ করেছেন, আপনি প্রস্থের () প্রশস্ততার পরিবর্তে jQuery আউটডোর প্রস্থ () ব্যবহার করতে চাইতে পারেন।

function isEllipsisActive($jQueryObject) {
    return ($jQueryObject.outerWidth() < $jQueryObject[0].scrollWidth);
}

Answer 4

খ্রিস্টান ভার্গা থেকে গৃহীত উত্তর (বা ব্যবহার করার পরিকল্পনা করছেন) তাদের জন্য, দয়া করে পারফরম্যান্স সংক্রান্ত সমস্যাগুলি সম্পর্কে সচেতন হন।

এইভাবে ডিওএমকে ক্লোনিং / হেরফের করার ফলে ডোম রিফ্লো হয় ( এখানে ডিওএম রিফ্লো সম্পর্কে একটি ব্যাখ্যা দেখুন ) যা অত্যন্ত সংস্থার নিবিড়।

একটি পৃষ্ঠায় 100+ উপাদানগুলিতে খ্রিস্টান ভার্গার দ্রবণটি ব্যবহারের ফলে 4 সেকেন্ডের রিফ্লো বিলম্ব ঘটে যার সময় জেএস থ্রেডটি লক থাকে। জেএসকে একক-থ্রেডযুক্ত বিবেচনা করে এর অর্থ শেষ ব্যবহারকারীর জন্য একটি গুরুত্বপূর্ণ ইউএক্স বিলম্ব।

Italo Borssatto এর উত্তরটি গ্রহণযোগ্য হওয়া উচিত, আমার প্রোফাইলের সময় এটি প্রায় 10 গুণ বেশি দ্রুত ছিল।

Comments

দুর্ভাগ্যক্রমে এটি প্রতিটি দৃশ্যে কাজ করে না (আমি আশা করি এটি করত)। এবং আপনি এখানে যে পারফরম্যান্সের হিট উল্লেখ করেছেন তা কেবলমাত্র এমন পরিস্থিতিতে চালিত করে অফসেট করা যেতে পারে যেখানে আপনাকে যাচাই করা দরকার - কেবলমাত্র mouseenterএকটি সরঞ্জামদণ্ড দেখানোর প্রয়োজন কিনা তা দেখার জন্য।

— জ্যাকব

Answer 5

ইটালো থেকে উত্তর খুব ভাল! তবে আমাকে এটি একটু সংশোধন করতে দিন:

function isEllipsisActive(e) {
   var tolerance = 2; // In px. Depends on the font you are using
   return e.offsetWidth + tolerance < e.scrollWidth;
}

ব্রাউজারের সামঞ্জস্যের ক্রস

তাহলে, আসলে, আপনি উপরের কোড এবং ব্যবহারের চেষ্টা console.logমান প্রিন্ট আউট করতে e.offsetWidthএবং e.scrollWidth, আপনি লক্ষ্য করবেন আই ই তে, যে, এমনকি যখন আপনি কোন লেখা ছাঁটাই আছে, মান পার্থক্য 1pxবা 2pxঅনুভব করা যায়।

সুতরাং, আপনি যে ফন্টের আকারটি ব্যবহার করেন তার উপর নির্ভর করে একটি নির্দিষ্ট সহনশীলতার অনুমতি দিন!

Comments

এটি আই 10 তে কাজ করে না - অফসেটউইথ স্ক্রোলউইথের সাথে সমান, উভয়ই আমাকে কাটা প্রশস্ততা দেয়।

— এসএসজিস্টি

ক্রোম 60 (সর্বশেষ) এও আমার এই সহনশীলতা দরকার।

— জানু কনভস্কি

Answer 6

elem.offsetWdith VS ele.scrolWidth আমার জন্য এই কাজ! https://jsfiddle.net/gustavojuan/210to9p1/

$(function() {
  $('.endtext').each(function(index, elem) {
    debugger;
    if(elem.offsetWidth !== elem.scrollWidth){
      $(this).css({color: '#FF0000'})
    }
  });
});

Comments

বর্তমান ক্রোম বা ফায়ারফক্সে কেউই কাজ করে না। দুটি উপাদানই লাল হয়ে যায়।

— xehpuk

Answer 7

এই স্যাম্পলটি পাঠ্যের কাটা কাটা টেবিলের সাথে টেলটিপটি প্রদর্শন করে। টেবিল প্রস্থের উপর ভিত্তি করে গতিশীল:

$.expr[':'].truncated = function (obj) {
    var element = $(obj);

    return (element[0].scrollHeight > (element.innerHeight() + 1)) || (element[0].scrollWidth > (element.innerWidth() + 1));
};

$(document).ready(function () {
    $("td").mouseenter(function () {
        var cella = $(this);
        var isTruncated = cella.filter(":truncated").length > 0;
        if (isTruncated) 
            cella.attr("title", cella.text());
        else 
            cella.attr("title", null);
    });
});

ডেমো: https://jsfiddle.net/t4qs3tqs/

এটি jQuery এর সমস্ত সংস্করণে কাজ করে

Answer 8

আমি মনে করি এটির সনাক্তকরণের আরও ভাল getClientRects()উপায়টি ব্যবহার করা হয় , মনে হয় প্রতিটি রেক্টরের একই উচ্চতা রয়েছে, তাই আমরা বিভিন্ন topমানের সংখ্যার সাথে লাইন সংখ্যাকে ক্যাকুলেট করতে পারি ।

getClientRectsএই মত কাজ

function getRowRects(element) {
    var rects = [],
        clientRects = element.getClientRects(),
        len = clientRects.length,
        clientRect, top, rectsLen, rect, i;

    for(i=0; i<len; i++) {
        has = false;
        rectsLen = rects.length;
        clientRect = clientRects[i];
        top = clientRect.top;
        while(rectsLen--) {
            rect = rects[rectsLen];
            if (rect.top == top) {
                has = true;
                break;
            }
        }
        if(has) {
            rect.right = rect.right > clientRect.right ? rect.right : clientRect.right;
            rect.width = rect.right - rect.left;
        }
        else {
            rects.push({
                top: clientRect.top,
                right: clientRect.right,
                bottom: clientRect.bottom,
                left: clientRect.left,
                width: clientRect.width,
                height: clientRect.height
            });
        }
    }
    return rects;
}

getRowRectsএই মত কাজ

আপনি এই মত সনাক্ত করতে পারেন

Answer 9

সকল সমাধান সত্যিই আমার জন্য কাজ না কি করেনি কাজ উপাদানের তুলনা করা হয় scrollWidthথেকেscrollWidth (যা উপাদান ট্রিগার হয়েছে উপর নির্ভর করে, বা শিশু) তার পিতা বা মাতা হন।

শিশু যখন scrollWidthতার বাবা-মায়ের চেয়ে বেশি হয়, তার অর্থ .text-ellipsisসক্রিয়।

---

eventমূল উপাদান কখন হয় is

function isEllipsisActive(event) {
    let el          = event.currentTarget;
    let width       = el.offsetWidth;
    let widthChild  = el.firstChild.offsetWidth;
    return (widthChild >= width);
}

---

eventশিশু উপাদান কখন হয়

function isEllipsisActive(event) {
    let el          = event.currentTarget;
    let width       = el.offsetWidth;
    let widthParent = el.parentElement.scrollWidth;
    return (width >= widthParent);
}

Answer 10

e.offsetWidth < e.scrollWidthসমাধান সবসময় কাজ করছে না।

এবং আপনি যদি খাঁটি জাভাস্ক্রিপ্ট ব্যবহার করতে চান তবে আমি এটি ব্যবহার করার পরামর্শ দিচ্ছি:

(টাইপ করা বিষয়)

public isEllipsisActive(element: HTMLElement): boolean {
    element.style.overflow = 'initial';
    const noEllipsisWidth = element.offsetWidth;
    element.style.overflow = 'hidden';
    const ellipsisWidth = element.offsetWidth;

    if (ellipsisWidth < noEllipsisWidth) {
      return true;
    } else {
      return false;
    }
}

Answer 11

@ ইটালোবর্স্যাটটো সমাধানটি নিখুঁত। তবে এসও দেখার আগে - আমি আমার সিদ্ধান্ত নিয়েছিলাম decision এটা এখানে :)

const elems = document.querySelectorAll('span');
elems.forEach(elem => {
  checkEllipsis(elem);
});

function checkEllipsis(elem){
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  const styles = getComputedStyle(elem);
  ctx.font = `${styles.fontWeight} ${styles.fontSize} ${styles.fontFamily}`;
  const widthTxt = ctx.measureText(elem.innerText).width;
  if (widthTxt > parseFloat(styles.width)){
    elem.style.color = 'red'
  }
}

span.cat {
    display: block;
    border: 1px solid black;
    white-space: nowrap;
    width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
}

 <span class="cat">Small Cat</span>
      <span class="cat">Looooooooooooooong Cat</span>

Answer 12

আমার বাস্তবায়ন)

const items = Array.from(document.querySelectorAll('.item'));
items.forEach(item =>{
    item.style.color = checkEllipsis(item) ? 'red': 'black'
})

function checkEllipsis(el){
  const styles = getComputedStyle(el);
  const widthEl = parseFloat(styles.width);
  const ctx = document.createElement('canvas').getContext('2d');
  ctx.font = `${styles.fontSize} ${styles.fontFamily}`;
  const text = ctx.measureText(el.innerText);
  return text.width > widthEl;
}

.item{
  width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
}

      <div class="item">Short</div>
      <div class="item">Loooooooooooong</div>

Answer 13

ডেমো http://jsfiddle.net/brandonzylstra/hjk9mvcy/ এ https://stackoverflow.com/users/241142/iconoclast দ্বারা উল্লিখিত কিছু mistasks আছে ।

তার ডেমোতে, এই কোডগুলি যুক্ত করে কাজ করবে:

setTimeout(() => {      
  console.log(EntryElm[0].offsetWidth)
}, 0)