Wykrywanie wielokropka przepełnienia tekstu HTML

Mam zbiór elementów blokowych na stronie. Wszystkie mają ustawione odstępy, przepełnienie, przepełnienie tekstu w regułach CSS, dzięki czemu przepełniony tekst jest przycinany i używany jest wielokropek.

Jednak nie wszystkie elementy się przepełniają.

Czy mimo wszystko mogę użyć javascript do wykrycia, które elementy są przepełnione?

Dzięki.

Dodano: przykładowa struktura HTML, z którą pracuję.

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

Elementy SPAN zawsze mieszczą się w komórkach, mają zastosowaną regułę wielokropka. Chcę wykryć, kiedy wielokropek jest stosowany do zawartości tekstu SPAN.

Kiedyś musiałem to zrobić, a jedynym niezawodnym rozwiązaniem dla różnych przeglądarek, na które natknąłem się, był hack. Nie jestem największym fanem takich rozwiązań, ale z pewnością daje to poprawny wynik za każdym razem.

Chodzi o to, że klonujesz element, usuwasz wszelką szerokość obwiedni i sprawdzasz, czy sklonowany element jest szerszy niż oryginał. Jeśli tak, wiesz, że zostanie obcięty.

Na przykład używając 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();

Zrobiłem jsFiddle, aby to zademonstrować, http://jsfiddle.net/cgzW8/2/

Możesz nawet stworzyć własny niestandardowy pseudo-selektor dla 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;
};

Następnie użyj go, aby znaleźć elementy

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

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

Miejmy nadzieję, że to pomoże, chociaż jest hacky.

Wypróbuj tę funkcję JS, przekazując element span jako argument:

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

Dodając do odpowiedzi italo, możesz to również zrobić za pomocą jQuery.

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

Ponadto, jak zauważył Smoky, możesz chcieć użyć jQuery externalWidth () zamiast width ().

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

Osoby korzystające (lub planujące użyć) zaakceptowanej odpowiedzi od Christiana Varga powinny mieć świadomość problemów z wydajnością.

Klonowanie / manipulowanie DOM w taki sposób powoduje przepływ DOM (zobacz wyjaśnienie na temat ponownego przepływu DOM tutaj), co jest niezwykle intensywne pod względem zasobów.

Użycie rozwiązania Christiana Vargi na ponad 100 elementach na stronie spowodowało 4-sekundowe opóźnienie ponownego przepływu, podczas którego wątek JS jest blokowany. Biorąc pod uwagę, że JS jest jednowątkowy, oznacza to znaczne opóźnienie UX dla użytkownika końcowego.

Italo Borssatto za odpowiedź powinna być przyjętym jeden, to było około 10 razy szybciej podczas mojego profilowania.

Odpowiedź od italo jest bardzo dobra! Pozwólcie jednak, że trochę to udoskonalę:

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

Zgodność z różnymi przeglądarkami

Jeśli faktycznie wypróbujesz powyższy kod i użyjesz console.logdo wydrukowania wartości e.offsetWidthi e.scrollWidth, zauważysz w IE, że nawet jeśli nie masz obcięcia tekstu, występuje różnica wartości 1pxlub 2pxwystępuje.

Tak więc, w zależności od używanego rozmiaru czcionki, dopuszczaj pewną tolerancję!

elem.offsetWdith VS ele.scrollWidth Ta praca dla mnie! https://jsfiddle.net/gustavojuan/210to9p1/

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

Ten przykład pokazuje podpowiedź w tabeli komórek z obciętym tekstem. Jest dynamiczny na podstawie szerokości stołu:

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

Próbny: https://jsfiddle.net/t4qs3tqs/

Działa na wszystkich wersjach jQuery

Myślę, że lepszym sposobem na wykrycie tego jest użycie getClientRects(), wydaje się, że każdy prostokąt ma tę samą wysokość, więc możemy obliczyć liczbę linii z liczbą różnychtop wartości.

getClientRectspracować w ten sposób

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 działa jak ten sposób

można wykryć jak to

Wszystkie rozwiązania tak naprawdę u mnie nie działały, zadziałało porównanie elementów scrollWidthzscrollWidth jego rodzica (lub dziecka, w zależności od tego, który element ma wyzwalacz).

Kiedy dziecko scrollWidthjest wyżej niż jego rodzice, oznacza to, że .text-ellipsisjest aktywne.

Kiedy eventjest elementem nadrzędnym

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

Kiedy eventjest elementem potomnym

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

Plik e.offsetWidth < e.scrollWidthRozwiązanie nie zawsze działa.

A jeśli chcesz używać czystego JavaScript, polecam użyć tego:

(maszynopis)

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

Rozwiązanie @ItaloBorssatto jest idealne. Ale zanim spojrzałem na SO - podjąłem decyzję. Oto jest :)

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>

Moja realizacja)

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>

w demie http://jsfiddle.net/brandonzylstra/hjk9mvcy/ jest kilka błędów, o których wspomina https://stackoverflow.com/users/241142/iconoclast .

w swoim demo dodaj ten kod będzie działał:

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