HTML text-обнаружение многоточия переполнения

попробуйте эту функцию JS, передавая элемент span в качестве аргумента:

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

добавление к ответу итало, вы также можете сделать это с помощью jQuery.

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

кроме того, как указал Смоки, вы можете использовать jQuery outerWidth() вместо width().

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

elem.offsetWdith VS ele.scrollWidth Это работа для меня! https://jsfiddle.net/gustavojuan/210to9p1/

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

этот пример показывает всплывающую подсказку на таблице ячеек с усеченным текстом. Является динамическим на основе ширины таблицы:

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

самое простое (и кросс-браузерное) решение на самом деле сравнивает scrollWidth с clientWidth

рабочий код здесь:https://stackoverflow.com/a/19156627/1213445

для тех, кто использует (или планирует использовать) принятый ответ от Christian Varga, пожалуйста, имейте в виду проблемы с производительностью.

клонирование / манипулирование DOM таким образом вызывает DOM Reflow (см. объяснение на DOM reflow здесь), что является чрезвычайно ресурсоемким.

использование решения Кристиана Варги на 100 + элементах на странице вызвало 4-секундную задержку оплавления, во время которой поток JS заблокирован. Учитывая, что JS-это однопоточный это означает значительную задержку UX для конечного пользователя.

Итало Borssatto это ответ должен быть принят, он был примерно в 10 раз быстрее во время моего профиля.

ответ итало очень хорошо! Однако позвольте мне уточнить немного:

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, вы заметите, на IE, что, даже если у вас нет усечения текста, разница значений 1px или 2px - это опытные.

Итак, в зависимости от размера шрифта, который вы используете, разрешите определенный допуск!

Я думаю, что лучший способ обнаружить это использовать 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 работы как этой

вы можете обнаружить, как этой

все решения на самом деле не работают для меня, что сделал работа была сравнить элементы scrollWidth до scrollWidth его родителя (или ребенка, в зависимости от того, какой элемент имеет триггер).

для детей scrollWidth выше своих родителей, значит .text-ellipsis активна.

---

, когда event является родительским для элемента

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

С Помощью JQuery:

$('#divID').css('text-overflow')

это выведет ваше свойство переполнения текста. Таким образом, вы можете проверить, если это было многоточие с:

if ($('#yourID').css('text-overflow') === 'ellipsis') {
  // It has overflowed
} else {
  // It has not
}