Rilevamento ellissi HTML con overflow del testo

Ho una raccolta di elementi a blocchi su una pagina. Tutti hanno le regole CSS impostate su spazio bianco, overflow, text-overflow in modo che il testo traboccante venga tagliato e vengano utilizzati i puntini di sospensione.

Tuttavia, non tutti gli elementi traboccano.

Posso comunque usare javascript per rilevare quali elementi traboccano?

Grazie.

Aggiunto: esempio di struttura HTML con cui sto lavorando.

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

Gli elementi SPAN si adattano sempre alle celle, hanno applicato la regola dei puntini di sospensione. Voglio rilevare quando i puntini di sospensione vengono applicati al contenuto testuale di SPAN.

Una volta avevo bisogno di fare questo, e l'unica soluzione affidabile tra browser che mi sono imbattuto è stato il lavoro di hacking. Non sono il più grande fan di soluzioni come questa, ma certamente produce sempre il risultato corretto.

L'idea è di clonare l'elemento, rimuovere qualsiasi larghezza di delimitazione e verificare se l'elemento clonato è più largo dell'originale. Se è così, sai che sarà troncato.

Ad esempio, usando 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();

Ho creato un jsFiddle per dimostrarlo, http://jsfiddle.net/cgzW8/2/

Puoi persino creare il tuo pseudo-selettore personalizzato per 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;
};

Quindi usalo per trovare elementi

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

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

Speriamo che questo aiuti, per quanto confuso.

Prova questa funzione JS, passando l'elemento span come argomento:

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

Aggiungendo alla risposta di italo, puoi anche farlo usando jQuery.

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

Inoltre, come ha sottolineato Smoky, potresti voler usare jQuery outerWidth () invece di width ().

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

Per coloro che utilizzano (o hanno intenzione di utilizzare) la risposta accettata da Christian Varga, si prega di essere consapevoli dei problemi di performance.

La clonazione / manipolazione del DOM in questo modo provoca il riflusso del DOM (vedere una spiegazione sul riflusso del DOM qui) che richiede molta risorse.

L'uso della soluzione di Christian Varga su oltre 100 elementi in una pagina ha causato un ritardo di riflusso di 4 secondi durante il quale il thread JS è bloccato. Considerando che JS è a thread singolo, ciò significa un ritardo UX significativo per l'utente finale.

La risposta di Italo Borssatto dovrebbe essere quella accettata, è stata circa 10 volte più veloce durante la mia profilazione.

La risposta di italo è molto buona! Tuttavia, consentitemi di perfezionarlo un po ':

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

Compatibilità tra browser

Se, in effetti, provi il codice sopra e utilizzi console.logper stampare i valori di e.offsetWidthe e.scrollWidth, noterai, su IE, che, anche quando non hai il troncamento del testo, si verifica una differenza di valore 1pxo 2px.

Quindi, a seconda della dimensione del carattere che usi, consenti una certa tolleranza!

elem.offsetWdith VS ele.scrollWidth Questo lavoro per me! https://jsfiddle.net/gustavojuan/210to9p1/

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

Questo esempio mostra la descrizione comandi sulla tabella di celle con testo troncato. È dinamico in base alla larghezza della tabella:

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

Funziona su tutte le versioni di jQuery

Penso che il modo migliore per rilevarlo sia l'uso getClientRects(), sembra che ogni rettangolo abbia la stessa altezza, quindi possiamo calcolare il numero di linee con il numero di diverso topvalore.

getClientRectsun'opera come questa

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

getRowRectsun'opera come questa

puoi rilevare in questo modo

Tutte le soluzioni non hanno funzionato davvero per me, quello che ha funzionato è stato confrontare gli elementi scrollWidthcon quelli scrollWidthdel suo genitore (o figlio, a seconda dell'elemento che ha il trigger).

Quando il bambino scrollWidthè più alto dei suoi genitori, significa che .text-ellipsisè attivo.

Quando eventè l'elemento genitore

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

Quando eventè l'elemento figlio

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

La e.offsetWidth < e.scrollWidthsoluzione non funziona sempre.

E se vuoi usare JavaScript puro, ti consiglio di usare questo:

(dattiloscritto)

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

La soluzione @ItaloBorssatto è perfetta. Ma prima di guardare SO - ho preso la mia decisione. Ecco qui :)

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>

La mia implementazione)

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>

ci sono alcuni mistask nella demo http://jsfiddle.net/brandonzylstra/hjk9mvcy/ menzionati da https://stackoverflow.com/users/241142/iconoclast .

nella sua demo, aggiungere questi codici funzionerà:

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