HTML metin taşması üç nokta algılama

Bir sayfada blok öğeleri koleksiyonum var. Hepsinde beyaz boşluk, taşma, metin taşması ayarlanmış CSS kuralları vardır, böylece taşan metin kesilir ve üç nokta kullanılır.

Ancak, tüm öğeler taşmaz.

Yine de hangi öğeleri taşan algılamak için javascript kullanabilirsiniz?

Teşekkürler.

Eklendi: örnek HTML yapısı ile çalışıyorum.

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

SPAN elemanları her zaman hücrelere uyar, üç nokta kuralı uygulanır. Üç nokta, SPAN'ın metin içeriğine ne zaman uygulandığını tespit etmek istiyorum.

Bir zamanlar bunu yapmam gerekiyordu ve karşılaştığım tek tarayıcılar arası güvenilir çözüm hack işiydi. Böyle çözümlerin en büyük hayranı değilim, ama kesinlikle tekrar tekrar doğru sonuç veriyor.

Fikir, öğeyi klonlamanız, sınırlama genişliğini kaldırmanız ve klonlanan öğenin orijinalden daha geniş olup olmadığını test etmenizdir. Eğer öyleyse, bunun kesileceğini biliyorsunuz.

Örneğin, jQuery kullanarak:

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();

Bunu göstermek için bir jsFiddle yaptım, http://jsfiddle.net/cgzW8/2/

JQuery için kendi özel sözde seçicinizi bile oluşturabilirsiniz:

$.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;
};

Sonra öğeleri bulmak için kullanın

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

Demo: http://jsfiddle.net/cgzW8/293/

Umarım bu yardımcı olur, hacky olduğu gibi.

Span öğesini bağımsız değişken olarak ileterek bu JS işlevini deneyin:

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

Italo'nun cevabına ek olarak, bunu jQuery kullanarak da yapabilirsiniz.

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

Ayrıca, Smoky'nin belirttiği gibi, width () yerine jQuery outerWidth () öğesini kullanmak isteyebilirsiniz.

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

Christian Varga'nın kabul ettiği cevabı kullanan (veya kullanmayı planlayanlar) için lütfen performans sorunlarının farkında olun.

DOM'yi bu şekilde klonlamak / değiştirmek , aşırı kaynak yoğun olan DOM Reflow'a ( DOM reflow ile ilgili bir açıklamaya bakın ) neden olur.

Christian Varga'nın çözümünü bir sayfada 100'den fazla öğe üzerinde kullanmak, JS iş parçacığının kilitlendiği 4 saniyelik bir yeniden akış gecikmesine neden oldu. JS'nin tek iş parçacıklı olduğu düşünüldüğünde, bu son kullanıcı için önemli bir UX gecikmesi anlamına gelir.

Italo Borssatto'nun cevabı kabul edilmiş olmalı, profilleme sırasında yaklaşık 10 kat daha hızlıydı.

İtalo cevap çok iyi! Ancak biraz daha hassaslaştıralım:

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

Çapraz tarayıcı uyumluluğu

Eğer, aslında, yukarıdaki kod ve kullanımını denemek console.logdeğerlerini yazdırmak e.offsetWidthve e.scrollWidthhiçbir metin kesme olmadığında bile, sen IE üzerinde, göreceksiniz, bir değer farkı 1pxveya 2pxdeneyimlidir.

Bu nedenle, kullandığınız yazı tipi boyutuna bağlı olarak, belirli bir toleransa izin verin!

elem.offsetWdith VS ele.scrollWidth Bu benim için çalışıyor! https://jsfiddle.net/gustavojuan/210to9p1/

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

Bu örnek, metin kesilmiş hücre tablosundaki araç ipucunu gösterir. Tabla genişliğine göre dinamik mi:

$.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);
    });
});

Demo: https://jsfiddle.net/t4qs3tqs/

JQuery'nin tüm sürümlerinde çalışır

Bence bunu tespit etmenin daha iyi bir yolu var, getClientRects()her rect aynı yüksekliğe sahip gibi görünüyor, bu yüzden farklı sayı sayısıyla satır sayısını hesaplayabiliriz top.

getClientRectsgibi işler bu

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

getRowRectsgibi işler bu

Eğer gibi algılayabilir bu

Tüm çözümler gerçekte ne benim için işe yaramadı did iş unsurları karşılaştırmak edildi scrollWidthiçin scrollWidth(ki eleman tetiği vardır bağlı veya çocuk) üst biriminin.

Çocuğun scrollWidthebeveynlerinden daha yüksek olması .text-ellipsis, aktif olduğu anlamına gelir .

eventÜst öğe ne zaman

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

eventAlt öğe ne zaman

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

e.offsetWidth < e.scrollWidthÇözümü her zaman çalışmıyor.

Ve saf JavaScript kullanmak istiyorsanız, bunu kullanmanızı tavsiye ederim:

(Daktilo versiyonu)

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

@ItaloBorssatto çözümü mükemmel. Ama SO'ya bakmadan önce kararımı verdim. İşte burada :)

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>

Uygulamam)

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>

https://stackoverflow.com/users/241142/iconoclast tarafından belirtilen demo http://jsfiddle.net/brandonzylstra/hjk9mvcy/ adresinde bazı yanlış görevler var .

demosunda, bu kodu eklemek çalışır:

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