poner - Detección de puntos suspensivos de desbordamiento de texto HTML

texto desbordado css

Question

Tengo una colección de elementos de bloque en una página. Todos tienen las reglas de CSS en blanco-espacio, desbordamiento, desbordamiento de texto establecido para que el texto desbordado se recorta y se utiliza una elipsis.

Sin embargo, no todos los elementos se desbordan.

¿De todos modos puedo usar javascript para detectar qué elementos se desbordan?

Gracias.

Agregado: estructura HTML de ejemplo con la que estoy trabajando.

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

Los elementos SPAN siempre caben en las celdas, tienen la regla de puntos suspensivos aplicada. Quiero detectar cuándo se aplica la elipsis al contenido de texto del SPAN.

Answer 1

Érase una vez que tenía que hacer esto, y la única solución confiable para navegadores cruzados que encontré fue piratear. No soy el mayor seguidor de soluciones como esta, pero ciertamente produce el resultado correcto una y otra vez.

La idea es clonar el elemento, eliminar cualquier ancho delimitador y probar si el elemento clonado es más ancho que el original. Si es así, sabes que se habrá truncado.

Por ejemplo, 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();

Hice un jsFiddle para demostrar esto, http://jsfiddle.net/cgzW8/2/

Incluso podría crear su propio pseudo selector para 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;
};

Entonces úsalo para encontrar elementos

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

Demostración: http://jsfiddle.net/cgzW8/293/

Espero que esto ayude, hacky como es.

Answer 2

¡La respuesta de italo es muy buena! Sin embargo, permítanme refinarlo un poco:

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

Compatibilidad con navegador cruzado

Si, de hecho, prueba el código anterior y usa console.log para imprimir los valores de e.offsetWidth y e.scrollWidth , notará, en IE, que, incluso cuando no tiene truncamiento de texto, una diferencia de valor de 1px o 2px tiene experiencia.

Entonces, dependiendo del tamaño de letra que use, ¡permita una cierta tolerancia!

Answer 3

Agregando a la respuesta de italo, también puedes hacer esto usando jQuery.

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

Además, como señaló Smoky, es posible que desee utilizar jQuery outerWidth () en lugar de width ().

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

Answer 4

Con JQuery:

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

Esto generará su propiedad de desbordamiento de texto. Para que puedas comprobar si se trata de una elipsis con:

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

Answer 5

Creo que la mejor manera de detectarlo es utilizar getClientRects() , parece que cada rect tiene la misma altura, por lo que podemos calcular el número de líneas con el número de valores top diferentes.

getClientRects funciona así

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 funciona así

puedes detectar así

Answer 6

Este ejemplo muestra información sobre herramientas en la tabla de células con texto truncado. Es dinámico en función del ancho de la tabla:

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

Demostración: https://jsfiddle.net/t4qs3tqs/

Funciona en todas las versiones de jQuery

Answer 7

La solución más simple (y entre navegadores) es en realidad comparar scrollWidth con clientWidth

Código de trabajo aquí: https://.com/a/19156627/1213445

Answer 8

Para aquellos que usan (o planean usar) la respuesta aceptada de Christian Varga, tenga en cuenta los problemas de rendimiento.

Clonando / manipulando el DOM de tal manera causa DOM Reflow (ver una explicación sobre el reflujo DOM aquí) que es extremadamente intensivo en recursos.

El uso de la solución de Christian Varga en más de 100 elementos en una página provocó un retraso de reflujo de 4 segundos durante el cual el hilo JS está bloqueado. Teniendo en cuenta que JS tiene un solo hilo, esto significa un retraso UX significativo para el usuario final.

La answer Italo Borssatto debería ser la aceptada, fue aproximadamente 10 veces más rápida durante mi perfil.

Answer 9

Pruebe esta función JS, pasando el elemento span como argumento:

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

Answer 10

Todas las soluciones realmente no me funcionaron, lo que funcionó fue comparar los elementos scrollWidth con scrollWidth de su elemento principal (o secundario, dependiendo de qué elemento tenga el activador).

Cuando scrollWidth del niño es más alto que sus padres, significa que .text-ellipsis está activa.

Cuando event es el elemento padre

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

Cuando event es el elemento secundario

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

Answer 11

elem.offsetWdith VS ele.scrollWidth ¡Esto funciona para mí! https://jsfiddle.net/gustavojuan/210to9p1/

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