javascript - varias - HTML: cómo puedo mostrar la información sobre herramientas ÚNICAMENTE cuando se activan puntos suspensivos

truncar texto con puntos suspensivos

Question

Tengo un lapso con datos dinámicos en mi página que contienen puntos suspensivos. Sentido:

<span style=''text-overflow: ellipsis; overflow : hidden; white-space: nowrap;  
 width: 71;''>${myData}</span>

y me gustaría agregar a este elemento información sobre herramientas con el mismo contenido (title = ''$ {myData}'') pero quiero que aparezca solo cuando el contenido es largo y las elipsis aparecen en la pantalla.
¿Hay alguna forma de hacerlo?

una dirección: cuando el navegador (IE en mi caso) saca puntos suspensivos, ¿genera un evento al respecto?

Answer 1

¡hombre araña! Estoy teniendo el mismo problema yo mismo. el navegador no parece saber que el texto se trunca. Todos los atributos DOM no muestran rastro de eso.
por supuesto, puede cambiar el desbordamiento a visible, medir el ancho, luego volver al desbordamiento oculto y luego comparar. esta es una solución fea y para mí no es realista porque tengo un montón de datos en la pantalla y no voy a recorrerlos todos. código incompleto: (repetitivo y derrochador)

for(elem in group){
   elem.style.overflow = ''visible'';
   var originalWidth = elem.offsetWidth;
   elem.style.overflow = ''hidden'';
   if(elem.offsetWidth > originalWidth)
       elem.title = elem.innerHTML;
}

si obtuviste algo más sustancial y menos "desigual", por favor hazlo saber.

Answer 2

Aquí está mi plugin jQuery:

(function($) {
    ''use strict'';
    $.fn.tooltipOnOverflow = function() {
        $(this).on("mouseenter", function() {
            if (this.offsetWidth < this.scrollWidth) {
                $(this).attr(''title'', $(this).text());
            } else {
                $(this).removeAttr("title");
            }
        });
    };
})(jQuery);

Uso:

$("td, th").tooltipOnOverflow();

Editar:

He hecho una esencia para este complemento. https://gist.github.com/UziTech/d45102cdffb1039d4415

Answer 3

Aquí hay una solución pura de CSS. No es necesario para jQuery. No mostrará una información sobre herramientas, sino que simplemente expandirá el contenido a su longitud total al pasar el mouse.

Funciona muy bien si tiene contenido que se reemplaza. Entonces no tiene que ejecutar una función jQuery cada vez.

.might-overflow {
    text-overflow: ellipsis;
    overflow : hidden;
    white-space: nowrap;
}

.might-overflow:hover {
    text-overflow: clip;
    white-space: normal;
    word-break: break-all;
}

Answer 4

Creé un complemento jQuery que usa la información sobre herramientas de Bootstrap en lugar de la información sobre herramientas incorporada del navegador. Tenga en cuenta que esto no se ha probado con un navegador más antiguo.

JSFiddle: https://jsfiddle.net/0bhsoavy/4/

$.fn.tooltipOnOverflow = function(options) {
    $(this).on("mouseenter", function() {
    if (this.offsetWidth < this.scrollWidth) {
        options = options || { placement: "auto"}
        options.title = $(this).text();
      $(this).tooltip(options);
      $(this).tooltip("show");
    } else {
      if ($(this).data("bs.tooltip")) {
        $tooltip.tooltip("hide");
        $tooltip.removeData("bs.tooltip");
      }
    }
  });
};

Answer 5

Esta es una forma de hacerlo utilizando la configuración de puntos suspensivos incorporados, y agrega el atributo de title a pedido (con jQuery) basándose en el comentario de Martin Smith:

$(''.mightOverflow'').bind(''mouseenter'', function(){
    var $this = $(this);

    if(this.offsetWidth < this.scrollWidth && !$this.attr(''title'')){
        $this.attr(''title'', $this.text());
    }
});

Answer 6

Esto es lo que hice. La mayoría de los scripts de información sobre herramientas requieren la ejecución de una función que almacene la información sobre herramientas. Este es un ejemplo de jQuery:

$.when($(''*'').filter(function() {
   return $(this).css(''text-overflow'') == ''ellipsis'';
}).each(function() {
   if (this.offsetWidth < this.scrollWidth && !$(this).attr(''title'')) {
      $(this).attr(''title'', $(this).text());
   }
})).done(function(){ 
   setupTooltip();
});

Si no desea buscar elipsis CSS, puede simplificar como:

$.when($(''*'').filter(function() {
   return (this.offsetWidth < this.scrollWidth && !$(this).attr(''title''));
}).each(function() {
   $(this).attr(''title'', $(this).text());
})).done(function(){ 
   setupTooltip();
});

Tengo el "cuándo" a su alrededor, de modo que la función "setupTooltip" no se ejecuta hasta que se hayan actualizado todos los títulos. Reemplace el "setupTooltip", con su función tooltip y el * con los elementos que desea verificar. * irá a través de todos ellos si lo dejas.

Si simplemente desea actualizar los atributos del título con la información sobre herramientas de los navegadores, puede simplificar como:

$(''*'').filter(function() {
   return $(this).css(''text-overflow'') == ''ellipsis'';
}).each(function() {
   if (this.offsetWidth < this.scrollWidth && !$(this).attr(''title'')) {
      $(this).attr(''title'', $(this).text());
   }
});

O sin verificación de puntos suspensivos:

$.when($(''*'').filter(function() {
   return (this.offsetWidth < this.scrollWidth && !$(this).attr(''title''));
}).each(function() {
   $(this).attr(''title'', $(this).text());
});

Answer 7

La respuesta de uosɐs es fundamentalmente correcta, pero probablemente no quieras hacerlo en el evento del mouseenter. Eso hará que haga el cálculo para determinar si es necesario, cada vez que pasa el mouse sobre el elemento. A menos que el tamaño del elemento cambie, no hay razón para hacerlo.

Sería mejor llamar a este código inmediatamente después de que el elemento se agrega al DOM:

var $ele = $(''#mightOverflow'');
var ele = $ele.eq(0);
if (ele.offsetWidth < ele.scrollWidth)
    $ele.attr(''title'', $ele.text());

O bien, si no sabe exactamente cuándo se agregó, llame a ese código una vez que la página haya terminado de cargarse.

si tiene más de un elemento con el que necesita hacer esto, puede darles la misma clase (como "mightOverflow") y usar este código para actualizarlos todos:

$(''.mightOverflow'').each(function() {
    var $ele = $(this);
    if (this.offsetWidth < this.scrollWidth)
        $ele.attr(''title'', $ele.text());
});

Answer 8

Necesitamos detectar si la elipsis realmente se aplica, luego mostrar una información sobre herramientas para revelar el texto completo. No es suficiente si solo se compara " this.offsetWidth < this.scrollWidth " cuando el elemento casi contiene su contenido, pero solo falta uno o dos píxeles más de ancho, especialmente para el texto de caracteres chinos / japoneses / coreanos de ancho completo.

Aquí hay un ejemplo: http://jsfiddle.net/28r5D/5/

Encontré una forma de mejorar la detección de elipsis:

1. Compare " this.offsetWidth < this.scrollWidth " primero, continúe con el paso # 2 si falla.
2. Cambie temporalmente el estilo css a {''overflow'': ''visible'', ''white-space'': ''normal'', ''word-break'': ''break-all''}.
3. Deje que el navegador retransmita. Si ocurre un ajuste de palabras, el elemento expandirá su altura, lo que también significa que se requiere elipsis.
4. Restaurar estilo css.

Aquí está mi mejora: http://jsfiddle.net/28r5D/6/

Answer 9

Ninguna de las soluciones anteriores funcionó para mí, pero descubrí una gran solución. El error más grande que las personas están cometiendo es tener todas las 3 propiedades de CSS declaradas en el elemento al cargar la página. Debe agregar esos estilos + información sobre herramientas dinámicamente SI y SÓLO SI el lapso en el que desea obtener una elipsis es más amplio que su elemento primario.

    $(''table'').each(function(){
        var content = $(this).find(''span'').text();
        var span = $(this).find(''span'');
        var td = $(this).find(''td'');
        var styles = {
            ''text-overflow'':''ellipsis'',
            ''white-space'':''nowrap'',
            ''overflow'':''hidden'',
            ''display'':''block'',
            ''width'': ''auto''
        };
        if (span.width() > td.width()){
            span.css(styles)
                .tooltip({
                trigger: ''hover'',
                html: true,
                title: content,
                placement: ''bottom''
            });
        }
    });

Answer 10

Posiblemente podría rodear el tramo con otro tramo, luego simplemente probar si el ancho del tramo original / interno es mayor que el tramo nuevo / externo. Tenga en cuenta que digo posiblemente - se basa más o menos en mi situación en la que tenía un span dentro de una td así que realmente no sé si funcionará dentro de un span .

Aquí, sin embargo, está mi código para otros que pueden encontrarse en una posición similar a la mía; Lo estoy copiando / pegando sin modificaciones, aunque se encuentre en un contexto angular, no creo que desmerezca la legibilidad y el concepto esencial. Lo codifiqué como un método de servicio porque necesitaba aplicarlo en más de un lugar. El selector en el que he estado pasando ha sido un selector de clase que coincidirá con varias instancias.

CaseService.applyTooltip = function(selector) {
    angular.element(selector).on(''mouseenter'', function(){
        var td = $(this)
        var span = td.find(''span'');

        if (!span.attr(''tooltip-computed'')) {
            //compute just once
            span.attr(''tooltip-computed'',''1'');

            if (span.width() > td.width()){
                span.attr(''data-toggle'',''tooltip'');
                span.attr(''data-placement'',''right'');
                span.attr(''title'', span.html());
            }
        }
    });
}

Answer 11

Si desea hacer esto únicamente usando javascript, yo haría lo siguiente. Proporcione al tramo un atributo id (para que pueda recuperarse fácilmente del DOM) y coloque todo el contenido en un atributo llamado ''contenido'':

<span id=''myDataId'' style=''text-overflow: ellipsis; overflow : hidden;
 white-space: nowrap; width: 71;'' content=''{$myData}''>${myData}</span>

Luego, en su javascript, puede hacer lo siguiente después de que el elemento se haya insertado en el DOM.

var elemInnerText, elemContent;
elemInnerText = document.getElementById("myDataId").innerText;
elemContent = document.getElementById("myDataId").getAttribute(''content'')
if(elemInnerText.length <= elemContent.length)
{
   document.getElementById("myDataId").setAttribute(''title'', elemContent); 
}

Por supuesto, si usa javascript para insertar el lapso en el DOM, puede mantener el contenido en una variable antes de insertarlo. De esta forma, no necesita un atributo de contenido en el tramo.

Hay soluciones más elegantes que esto si desea usar jQuery.

Answer 12

Tengo clase de CSS, que determina dónde poner puntos suspensivos. Basado en eso, hago lo siguiente (el conjunto de elementos puede ser diferente, los escribo, donde se usan puntos suspensivos, por supuesto, podría ser un selector de clases por separado):

$(document).on(''mouseover'', ''input, td, th'', function() {
    if ($(this).css(''text-overflow'') && typeof $(this).attr(''title'') === ''undefined'') {
        $(this).attr(''title'', $(this).val());
    }
});