Texte HTML-débordement détection de points de suspension

J'ai une collection de bloquer les éléments sur une page. Elles ont toutes les règles CSS white-space, de dépassement, de text-overflow définie de sorte que le débordement de texte est équilibré et des points de suspension est utilisée.

Cependant, pas tous les éléments de débordement.

Est-il de toute façon je peux utiliser javascript pour détecter les éléments qui débordent?

Grâce.

Ajouté: exemple de structure HTML, je travaille avec.

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

Les éléments SPAN toujours en forme dans les cellules, ils ont les points de suspension de la règle appliquée. Je veux détecter le moment où les points de suspension est appliquée sur le contenu du texte de la DURÉE.

  • Dupliquer: stackoverflow.com/questions/143815/...
  • Pas un doublon! Cette question est à propos d'un élément à l'intérieur de l'autre, élément parent. Je parle du texte dans un élément unique. Dans mon cas, la DURÉE de la TD jamais de débordement de la TD, c'est le texte dans l'espace qui déborde, et est garni. C'est ce que je suis en train de les détecter! Désolé - je pourrais avoir posé cette question mieux je l'avoue.
  • Oh, j'ai oublié d'ajouter - ce seulement besoin de travailler sur webkit si ça peut aider...
  • Je n'ai Ghommey juste pour voir si il a fait un travail...il n'a pas.
  • les points de suspension aspect est sans importance; tout ce que vous devez détecter est de savoir s'il est débordé.
InformationsquelleAutor deanoj | 2011-10-12
  1. 105

    Une fois, j'avais besoin de le faire, et le seul de la croix-navigateur solution fiable, je suis tombé sur le hack de travail. Je ne suis pas le plus grand fan de solutions de ce type, mais il a certainement produit le résultat correct encore et encore.

    L'idée est que le clonage de l'élément, de supprimer toute délimitation de largeur, et de tester si l'élément cloné est plus large que l'original. Si oui, vous savez qu'il va y avoir été tronqué.

    Par exemple, à l'aide de 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();

    J'ai fait un jsFiddle pour le démontrer, http://jsfiddle.net/cgzW8/2/

    Vous pouvez même créer votre propre personnalisé pseudo-sélecteur 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;
};

    Puis l'utiliser pour trouver des éléments

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

    Démo: http://jsfiddle.net/cgzW8/293/

    Espérons que cette aide, hacky comme il est.

    • merci christian, j'ai vu cela avant et il semble que c'est la seule option disponible pour moi.
    • Cela pourrait-il fonctionner avec le clonage le texte, et de voir si les textes match ou pas?
    • Non; CSS troncature ne change pas le réel texte dans la boîte, de sorte que le contenu est toujours le même, s'il est tronqué, visible ou caché. Il n'y a pas encore de façon à obtenir par programmation le texte tronqué, si il y avait alors, vous n'auriez pas besoin de cloner l'élément en premier lieu!
    • Semble que cela ne fonctionne pas dans les situations où il n'existe pas de white-space: nowrap.
    • Que voulez-vous dire? La démo que j'ai fournis à droite il y a dans ma réponse a white-space: nowrap et ça marche... jsfiddle.net/cgzW8/2
    • oui et si vous le supprimez, il ne fonctionne pas.
    • J'ai juste supprimé white-space: nowrap, et il fonctionne dans ma démonstration. jsfiddle.net/cgzW8/291. Testé dans Chrome, Firefox, Safari, IE8, et IE11.
    • il n'est pas: jsfiddle.net/cgzW8/294
    • Ok, je vois ce que tu veux dire. Vos mots qui me confond, c'est pas que ça ne fonctionne pas, parce qu'il fonctionne encore. Il travaille aussi où il ne devrait pas, et c'est le vrai problème. Je ne suis pas un lecteur d'esprit, de sorte que lorsque vous dites à quelqu'un de leur code "ne fonctionne pas", veuillez expliquer pourquoi. Il aide toutes les personnes impliquées. Cependant, j'ai essayé de trouver une solution, en vain, ce que vous voulez faire semble assez difficile.
    • Je dois dire qu'après la recherche de BEAUCOUP sur l'internet et a essayé de mettre en œuvre de nombreuses solutions, ce de loin la plus fiable que j'ai trouvé. Cette solution ne permet pas de donner des résultats différents entre les navigateurs comme élément.innerWidth ou de l'élément.OffsetWidth ne qui avez un problème lors de l'utilisation de marges ou de rembourrage.. très bonne solution, Bien fait.
    • Je suis d'accord avec la Description, c'est la meilleure solution que j'ai trouvé sur le net, indépendamment de hackiness. J'ai cependant trouvé un problème: Si l'élément en question est assez petit, et si on redimensionne la page, alors il est possible que la différence entre l'élément cloné de la largeur et de l'élément d'origine de la largeur de moins d'un pixel. Cela signifie que les points de suspension peuvent apparaître, même si votre code dit il n'y a pas de différence dans la largeur. Pour corriger cela, j'ai utilisé la réponse à partir du lien suivant pour plus de précision: stackoverflow.com/questions/11907514/...
    • Juste une remarque sur mon dernier commentaire: Comparaison de flottants point largeurs a entraîné le problème inverse, j'ai donc dû ajouter une tolérance – c'est à dire si la différence entre l'élément cloné flottante de la largeur de la pointe et de l'original à virgule flottante largeur est inférieure à 0,01 je les considère comme égaux. Je me rends compte de cela fait cela pour encore plus de hacky solution mais je ne vois pas d'autre option si vous avez besoin d'une plus exacte de la largeur de la comparaison.
    • Merci pour l'astuce. Sous-pixels sont le fléau de mon existence. Pouvez-vous créer un jsFiddle avec votre code mis à jour? Je vais ensuite prendre un coup d'oeil et de le fusionner dans ma réponse.
    • Voici l'original de votre jsFiddle modifié avec le changement: jsfiddle.net/cgzW8/418 le moyen Le plus facile de voir la différence est que si vous modifier le css pour avoir un 171.5 px de largeur. Dans Chrome/Firefox/IE ce qui provoque des points de suspension apparaissent, mais avec l'original du JavaScript, il n'est pas reconnu comme étant tronqué, comme la largeur est arrondi à 172px.
    • Le getBoundingClientRect comprend des frontières, donc, avec la modification que j'ai faite c'est en fait de donner de 173,5 comme la largeur. Mais l'objet cloné est mesurée de la même façon, donc ça devrait être ok. Il n'y a plus d'infos sur la fonction ici: developer.mozilla.org/en-US/docs/Web/API/Element/...
    • De nombreuses QA de elipsis de détection, seulement cette réponse a fonctionné pour moi. Le problème a été boundry cas où elipsis a été montrer, mais encore scrollWidth a moins de offsetWidth, celui-ci résolu. Fait une petite modification pour mon cas, si, au lieu de l'ajout de body ajouté à l'élément courant(td dans mon cas) et immédiatement supprimé. Merci beaucoup!!
    • Excellente solution, juste pour moi, 'inline-block' œuvres au lieu de 'inline'
    • Pour moi, cela ne fonctionne pas partout. Je ne suis pas sûr, la façon dont il dépend (CSS, j'ai essayé de l'utiliser sur les contrôles de saisie, les solutions ci-dessous, ont travaillé au moins dans Chrome et Firefox (mais pas dans IE11))...
    • Excellente solution, en particulier à l'aide de jQuery pseudo-sélecteur. Mais parfois ne peut pas fonctionner, car la largeur est calculée correctement si l'élément de texte a un style différent (taille de police, letter-spacing, les marges des éléments internes). Dans ce cas, je vous recommande d'ajouter clone élément de $cette.parent() au lieu de "corps". Cela donnera copie exacte de l'élément et les calculs seront corrects. Merci quand même
    • Cela ne fonctionne pas pour moi dans Firefox. Lors de l'application .largeur() sur le tronc de l'élément I get 611px, mais lors de l'obtention de la largeur du nouvel élément ajouté-je obtenir 379px. Et bien sûr, la raison pour cela est que mon div eu un peu de CSS appliqué à lui qui ne s'applique pas plus pour le cloné div une fois sorti de son contexte.
    • Ce n'est pas de travail pour moi. Je ne suis pas à l'aide de durée, de messagerie instantanée à l'aide de champs de saisie. Quelqu'un sait si il y a des changements nécessaires pour faire ce travail pour les entrées?
    • au lieu d'ajouter à corps, c'est peut-être préférable de l'ajouter à element.parentNode? (un peu de css imbrication des règles qui affectent la largeur peut ne pas s'appliquer lorsque vous l'ajouter à corps)
    • Voici un vanilla JS version: jsfiddle.net/Ld2pjabu/5 Résumé: gist.github.com/guacamoli/859d7853c137b905dc4dc950186d3a22
    • C'est une bonne solution, mais comme @Kevin mentionné, ajoutant à $element.parent() va maintenir des règles CSS intacte qui, autrement, peuvent faire le clone plus large que l'original. En outre, vous pouvez copier l'attribut class de l'élément pour le clone afin d'éviter les écarts causés par les CSS. Par exemple, la taille de la police et de la famille de polices appliquée par une classe peut faire le clone est plus large que l'élément d'origine.
    • Bonjour @Christian Verga , j'ai appliqué la même solution dans le même problème, mais il ne fonctionnera pas dans un cas à la fois de la largeur sont les mêmes. Il ne les détecte pas exactement. Merci de m'aider si possible.
    • Cela fonctionne, mais vous devez prendre en compte la largeur de l'ellipse, vous pouvez créer span avec &hellip; obtenir la largeur d'ajouter à la $c.width() ou soustraire de $element.width()

    InformationsquelleAutor Christian Varga
  2. 231

    Essayer cette fonction JS, en passant l'élément span comme argument:

    function isEllipsisActive(e) {
     return (e.offsetWidth < e.scrollWidth);
}
    • Cela devrait être la réponse - très élégant et fonctionne sur Chrome et IE(9)
    • Cette réponse et Alex réponse ne fonctionnera pas avec IE8; il existe quelques rares cas où le défilement de la largeur et de outerwidth sont les mêmes...mais il a des points de suspension, et puis certains cas où ils sont les mêmes...et il n'y a PAS de points de suspension. En d'autres termes, la première solution est la seule qui fonctionne sur tous les navigateurs.
    • Cela ne fonctionne pas pour moi. Je reçois 0 tout le temps pour chaque élément, pour les deux offsetWidth et scrollWidth, même si je peux voir clairement les points de suspension. (Et je ne suis pas en utilisant IE: j'utilise la dernière version de google Chrome.) jsfiddle.net/brandonzylstra/hjk9mvcy
    • Ne fonctionne pas dans IE11...
    • ne fonctionne pas pour la durée de
    • Pour ceux qui ont besoin de comprendre offsetWidth, scrollWidth, et clientWidth, voici une très bonne explication: stackoverflow.com/a/21064102/1815779
    • Sur text-overflow:ellipsis il devrait être e.offsetWidth <= e.scrollWidth
    • Je suis une enquête sur une question où la détection semble être hors d'un caractère. Je suis la détection de dépassement de capacité d'un caractère plus tard que je ne l'. Je pense qu'il y a une légère différence, où les points de suspension est indiquée lorsque le texte pourrait en fait à l'aise. J'ai essayé de désactiver temporairement "text-overflow: ellipsis" et bien sûr le texte ajustement sans aucun débordement. Il pourrait être un problème de navigateur. J'utilise Firefox 62 sur WIndows 10.
    • J'ai testé aussi avec clientWidth au lieu de offsetWidth et la même question était évidente.
    • Ils sont toujours égaux les uns aux autres sur flex enfants, et donc, de ne pas travailler pour eux.

    InformationsquelleAutor Italo Borssatto
  3. 13

    L'ajout d'italo réponse, vous pouvez également le faire à l'aide de jQuery.

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

    Aussi, comme Smoky remarquer, vous souhaitez peut-être utiliser jQuery outerWidth() au lieu de width().

    function isEllipsisActive($jQueryObject) {
    return ($jQueryObject.outerWidth() < $jQueryObject[0].scrollWidth);
}
    • Merci pour votre code. Mais $jQueryObject.width() n'est pas "correct" car elle ne prend pas les cellules de la marge en compte. $jQueryObject.outerWidth() doit être utilisé.
    InformationsquelleAutor Alex K
  4. 7

    Pour ceux qui utilisent (ou envisagent de le faire) la accepté de répondre à de Christian Varga, s'il vous plaît être conscient des problèmes de performances.

    Clonage/manipulation du DOM de manière causes DOM Redistribution (voir une explication sur les DOM de redistribution ici), qui est extrêmement gourmande en ressources.

    L'aide de Christian Varga de la solution sur+ de 100 éléments sur une page causé 4 secondes de redistribution retard au cours de laquelle la JS fil est verrouillé. Considérant le JS est mono-thread, ce qui signifie un important UX de retard à l'utilisateur final.

    Italo Borssatto de réponse devrait être accepté, il était environ 10 fois plus rapide lors de ma profilage.

    • Malheureusement, il ne fonctionne pas dans tous les cas de figure (j'aimerais que ce soit). Et les performances que vous mentionnez ici peut être compensé que par l'exécutant pour la situation dans laquelle vous avez besoin de vérifier - comme seulement sur mouseenter pour voir si une info-bulle doit être affichée.
    InformationsquelleAutor RyanGled
  5. 5

    elem.offsetWdith VS ele.scrollWidth
    Ce travail pour moi!
    https://jsfiddle.net/gustavojuan/210to9p1/

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

    Le plus simple (et cross-browser) la solution est de comparer les scrollWidth avec clientWidth

    Code de travail ici : https://stackoverflow.com/a/19156627/1213445

    InformationsquelleAutor NicolasBernier
  7. 4

    Cet exemple afficher les info-bulle sur la cellule de tableau avec un texte tronqué. Est dynamique basée sur la largeur de la table:

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

    Démo: https://jsfiddle.net/t4qs3tqs/

    Il fonctionne sur toutes les versions de jQuery

    • Il ne fonctionne pas sur IE10
    InformationsquelleAutor Red
  8. 3

    Réponse de italo est très bon! Toutefois, permettez-moi de préciser un peu:

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

    De compatibilité du navigateur

    Si, en fait, vous essayez le code ci-dessus et l'utilisation console.log pour imprimer les valeurs de e.offsetWidth et e.scrollWidth, vous remarquerez, sur IE, que, même lorsque vous n'avez pas de texte de troncature, une différence de valeur 1px ou 2px est connu.

    Ainsi, en fonction de la taille de la police que vous utilisez, permettent une certaine tolérance!

    • Il ne fonctionne pas sur IE10 - offsetWidth est identique à scrollWidth, à la fois de me donner le tronc de la largeur.
    • J'ai besoin de cette tolérance sur Chrome 60 (dernière) trop.
    InformationsquelleAutor Andry
  9. 1

    Je pense que la meilleure façon de le détecter est l'utilisation getClientRects(), il semble que chaque rect a la même hauteur, de sorte que nous pouvons caculate lignes en nombre avec le nombre de différents top valeur.

    getClientRects travail comme cette

    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 travail comme cette

    vous pouvez détecter comme cette

    InformationsquelleAutor Defims
  10. 1

    Toutes les solutions ne fonctionne pas vraiment pour moi, ce ne travail était de comparer les éléments scrollWidth à la scrollWidth de son parent (ou enfant, selon l'élément a de la gâchette).

    Lorsque l'enfant scrollWidth est plus élevé que celui de ses parents, cela signifie .text-ellipsis est active.

    Quand event est le parent de l'élément

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

    Quand event est l'élément enfant

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