Texte tronqué avec jQuery basé sur le pixel de largeur

Je suis en train d'utiliser jquery pour écrire un rapide fonction qui calcule la largeur en pixels d'une chaîne de caractères sur une page html, puis tronque la chaîne jusqu'à atteindre un idéal de largeur en pixels...

Cependant il ne fonctionne pas (le texte n'est pas tronquer)...

Voici le code que j'ai:

    function constrain(text, original, ideal_width){

    var temp_item = ('<span class="temp_item" style="display:none;">'+ text +'</span>');
    $(temp_item).appendTo('body');
    var item_width = $('span.temp_item').width();
    var ideal = parseInt(ideal_width);
    var smaller_text = text;

    while (item_width > ideal) {
        smaller_text = smaller_text.substr(0, (smaller_text-1));
        $('.temp_item').html(text);
        item_width = $('span.temp_item').width();
    }

    var final_length = smaller_text.length;

    if (final_length != original) {
        return (smaller_text + '&hellip;');
    } else {
        return text;
    }
}

Voici comment je vais l'appeler à partir de la page:

    $('.service_link span:odd').each(function(){
    var item_text = $(this).text();
    var original_length = item_text.length;
    var constrained = constrain(item_text, original_length,175);
    $(this).html(constrained);
});

Toutes les idées sur ce que je fais mal? Si il y a un moyen de le faire plus rapidement (c'est à dire de tri à bulles), ce serait très bien aussi.

Merci!

InformationsquelleAutor novon | 2009-05-22
  1. 33

    Plutôt que ce piratage avec script, pourquoi ne pas simplement utiliser le CSS pour définir la largeur de l'élément que vous mettez cette chaîne? Vous pouvez utiliser text-overflow pour indiquer au navigateur qu'il doit tronquer avec des points de suspension.

    .truncated { display:inline-block; max-width:100px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

    text-overflow est un CSS3 déclaration, mais est pris en charge dans IE 6+, WebKit 312.3+ (Safari 1.3+/Chrome), et Opera 9+ (versions < 10.7 besoin de la -o-text-overflow déclaration).

    Noter que cette était pas implémenté dans Firefox jusqu'à 7.0, et moins de 4% des utilisateurs de Firefox sont toujours d'utiliser les anciennes versions (surtout 3.6). Votre texte sera toujours tronquée dans les anciennes versions, il y a juste ne sera pas des points de suspension rendue. Si vous êtes préoccupé par ce petit groupe d'utilisateurs, vous pouvez utiliser ce plugin jQuery, qui ne fait rien dans IE/WebKit/Opera/Firefox ≥ 7, mais va émuler text-overflow dans Firefox ≤ 6.

    • Notez que text-overflow: ellipses ne fonctionne pas à moins d'utiliser un espace:nowrap. Qui est, vous ne pouvez pas l'utiliser lorsque vous voulez que le texte s'envelopper dans sa boîte.
    • C'est un peu gênant - de sorte que vous ne pouvez contrôler le dépassement de texte sur une seule ligne?
    • comment peut-on contrôler le texte de la troncature sur un div ayant plusieurs lignes?
    • Tu es ma personne préférée dans le monde entier maintenant.
    InformationsquelleAutor josh3736
  2. 3

    Sur cette ligne:

    smaller_text = smaller_text.substr(0, (smaller_text-1));

    vous pouvez avoir l'intention

    smaller_text = smaller_text.substr(0, (smaller_text.length-1));

    Ne fait que résoudre le problème?

    InformationsquelleAutor Dan Davies Brackett
  3. 0

    Merci, je l'ai eu à travailler, mais il ne fonctionne que sur le premier élément et s'arrête, est ce que cela a à voir avec la façon dont je suis la déclaration des variables?

    voici le code actuel:

        function constrain(text, original, ideal_width){

    var temp_item = ('<span class="temp_item" style="display:none;">'+ text +'</span>');
    $(temp_item).appendTo('body');
    var item_width = $('span.temp_item').width();
    var ideal = parseInt(ideal_width);
    var smaller_text = text;

    while (item_width > ideal) {
        smaller_text = smaller_text.substr(0, (smaller_text.length-1));
        $('.temp_item').html(smaller_text);
        item_width = $('span.temp_item').width();
    }

    var final_length = smaller_text.length;

    if (final_length != original) {
        return (smaller_text + '&hellip;');
    } else {
        return text;
    }
}
    • Je ne vois rien évidemment faux avec les déclarations que j'avais de la faire échouer sur les autres éléments. Vous êtes sûr de votre sélection est l'application de plusieurs articles? (veuillez également ne pas oublier de marquer ma réponse comme une solution si vous pensez qu'elle le mérite =) )
    • Il travaille vite en Safari mais prend trop de temps dans firefox... de toute façon de faire de l'instruction while plus efficace?
    • BTW - je l'ai eu à travailler sur tout en déplaçant le : var temp_item = ('<span class="temp_item" style="display:none;"> "+ texte + " </span>'); $(temp_item).appendTo('body'); À l'extérieur de la fonction... mais le problème de vitesse dans firefox et plus lent navigateurs persiste toujours! Merci pour l'aide pour l'instant
    InformationsquelleAutor novon
  4. 0

    La fonction prend le texte à vérifier, la ideal_width en pixel et le nom de la classe pour le css. Si le ideal_width est inférieure à la largeur du texte, il les troncs et ajoute l'hellip sinon, elle retourne le texte non modifié. Simple et fonctionne! 🙂

    function constrain(text, ideal_width, className){

    var temp_item = ('<span class="'+className+'_hide" style="display:none;">'+ text +'</span>');
    $(temp_item).appendTo('body');
    var item_width = $('span.'+className+'_hide').width();
    var ideal = parseInt(ideal_width);
    var smaller_text = text;

    if (item_width>ideal_width){
        while (item_width > ideal) {
            smaller_text = smaller_text.substr(0, (smaller_text.length-1));
            $('.'+className+'_hide').html(smaller_text);
            item_width = $('span.'+className+'_hide').width();
        }
        smaller_text = smaller_text + '&hellip;'
    }
    $('span.'+className+'_hide').remove();
    return smaller_text;
}
    InformationsquelleAutor Angelo Nodari
  5. 0

    Si vous avez le texte, et de savoir la taille que vous voulez, pourquoi ne pas simplement utiliser substr?

    J'ai fait quelque chose de similaire avec

    $('#history-1').text( $('#history-1').text().trim().substr(0,32) + "..." )
    • Sauf si vous utilisez une police à largeur fixe de Messagerie, vous ne pouvez pas garantir que n caractères seront x pixels de large. (Par exemple, un m est beaucoup plus large que un l.) Et vraiment, même si vous essayez d'utiliser une police à largeur fixe, vous ne pouvez toujours pas garantie la largeur en pixels de chaque caractère en raison des différences entre les plates-formes, les paramètres du navigateur, et ainsi de suite.
    InformationsquelleAutor doubtingben