Erkennung von HTML-Textüberlauf-Auslassungspunkten

Ich habe eine Sammlung von Blockelementen auf einer Seite. Sie alle haben die CSS-Regeln Leerraum, Überlauf, Textüberlauf so eingestellt, dass überlaufender Text abgeschnitten und eine Ellipse verwendet wird.

Es laufen jedoch nicht alle Elemente über.

Kann ich mit Javascript erkennen, welche Elemente überlaufen?

Vielen Dank.

Hinzugefügt: Beispiel einer HTML-Struktur, mit der ich arbeite.

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

Die SPAN-Elemente passen immer in die Zellen, es wird die Ellipsenregel angewendet. Ich möchte erkennen, wann die Auslassungspunkte auf den Textinhalt des SPAN angewendet werden.

Es war einmal, dass ich dies tun musste, und die einzige browserübergreifende zuverlässige Lösung, auf die ich stieß, war Hackjob. Ich bin nicht der größte Fan solcher Lösungen, aber es liefert immer wieder das richtige Ergebnis.

Die Idee ist, dass Sie das Element klonen, die Begrenzungsbreite entfernen und testen, ob das geklonte Element breiter als das Original ist. Wenn ja, wissen Sie, dass es abgeschnitten worden sein wird.

Beispiel: Verwenden von 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();

Ich habe eine jsFiddle erstellt, um dies zu demonstrieren: http://jsfiddle.net/cgzW8/2/

Sie können sogar Ihren eigenen benutzerdefinierten Pseudo-Selektor für jQuery erstellen:

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

Verwenden Sie es dann, um Elemente zu finden

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

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

Hoffentlich hilft das, hacky wie es ist.

Probieren Sie diese JS-Funktion aus und übergeben Sie das span-Element als Argument:

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

Zusätzlich zur Antwort von italo können Sie dies auch mit jQuery tun.

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

Wie Smoky hervorhob, möchten Sie möglicherweise auch jQuery OuterWidth () anstelle von width () verwenden.

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

Wenn Sie die akzeptierte Antwort von Christian Varga verwenden (oder planen, diese zu verwenden), beachten Sie bitte die Leistungsprobleme.

Das Klonen / Bearbeiten des DOM auf diese Weise führt zu einem DOM-Reflow (siehe Erläuterung zum DOM-Reflow hier), der äußerst ressourcenintensiv ist.

Die Verwendung der Lösung von Christian Varga für mehr als 100 Elemente auf einer Seite verursachte eine Reflow-Verzögerung von 4 Sekunden, während der der JS-Thread gesperrt ist. Wenn man bedenkt, dass JS Single-Threaded ist, bedeutet dies eine erhebliche UX-Verzögerung für den Endbenutzer.

Die Antwort von Italo Borssatto sollte die akzeptierte sein, sie war während meiner Profilerstellung ungefähr zehnmal schneller.

Antwort von italo ist sehr gut! Lassen Sie es mich jedoch ein wenig verfeinern:

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

Cross-Browser-Kompatibilität

Wenn Sie tatsächlich den obigen Code ausprobieren und console.logzum Ausdrucken der Werte von e.offsetWidthund verwenden e.scrollWidth, werden Sie im IE feststellen, dass selbst wenn Sie keine Textabschneidung haben, eine Wertdifferenz von 1pxoder2px auftritt.

Lassen Sie also je nach verwendeter Schriftgröße eine bestimmte Toleranz zu!

elem.offsetWdith VS ele.scrollWidth Diese Arbeit für mich! https://jsfiddle.net/gustavojuan/210to9p1/

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

In diesem Beispiel wird ein Tooltip für eine Zelltabelle mit abgeschnittenem Text angezeigt. Ist dynamisch basierend auf der Tabellenbreite:

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

Es funktioniert auf allen Versionen von jQuery

Ich denke, der bessere Weg, dies zu erkennen, ist die Verwendung getClientRects(). Es scheint, dass jedes Rechteck die gleiche Höhe hat, sodass wir die Zeilennummer mit der Anzahl der unterschiedlichen topWerte berechnen können.

getClientRectsarbeite so

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

getRowRectsarbeite so

Sie kann wie erkennen diese

Alle Lösungen haben bei mir nicht wirklich funktioniert. Es hat funktioniert, die Elemente scrollWidthmit denen scrollWidthdes Elternteils (oder des Kindes, je nachdem, welches Element den Auslöser hat) zu vergleichen.

Wenn das Kind scrollWidthhöher ist als seine Eltern, bedeutet dies, dass .text-ellipsises aktiv ist.

Wann eventist das übergeordnete Element?

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

Wann eventist das untergeordnete Element?

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

Die e.offsetWidth < e.scrollWidthLösung funktioniert nicht immer.

Und wenn Sie reines JavaScript verwenden möchten, empfehle ich Folgendes:

(Typoskript)

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

Die Lösung @ItaloBorssatto ist perfekt. Aber bevor ich mir SO ansah, traf ich meine Entscheidung. Hier ist es :)

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>

Meine Implementierung)

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>

Die Demo http://jsfiddle.net/brandonzylstra/hjk9mvcy/ enthält einige Fehler, die von https://stackoverflow.com/users/241142/iconoclast erwähnt werden .

Fügen Sie in seiner Demo diesen Code hinzu:

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