Remplacez les chaînes trop longues par "..."

Permet de dire que nous avons un <div style="width:100px;">This text is too long to fit</div>

Le texte dans le div est dynamique. Et je voudrais forcer le texte pour l'adapter à la largeur et ne pas le casser.
J'ai donc besoin d'un certain type de fonctionnalité à tester si le texte va pour s'adapter à, et si elle ne l'est pas, alors j'aimerais afficher la partie du texte qui va s'adapter. Et d'ajouter ...à la fin.

Résultat d'un trop long texte devrait être quelque chose comme ceci: "This text is..."

Est-il un moyen standard de faire ce que je veux? Soit par javascript, jquery, jsp ou java?

Merci!

Edit:
Merci pour votre rapide et de nombreuses réponses! J'ai fait ça en java, en devinant combien de caractères. Il semblait un peu moins de la solution optimale, donc c'est pourquoi je suis venu ici.

Le css solution est parfait pour moi. Ce n'est pas que les grandes d'un accord qu'il ne marche pas pour firefox, depuis mes clients tous les utiliser ie de toute façon. 🙂

source d'informationauteur user829237

  1. 24

    vous pourriez le faire avec css3 en utilisant text-overflow:ellipsis http://www.css3.com/css-text-overflow/

    ou si vous insistez sur l'utilisation de la js façon, vous pouvez enrouler le nœud texte à l'intérieur de votre div, puis de comparer la largeur de l'écharpe avec le avec le parent.

  2. 5
    if(text.length > number_of_characters) {
   text = text.substring(from, to);
}
  3. 0

    text-overflow: ellipis

    div {
    text-overflow:  ellipsis
}

    Seront pris en charge dans FireFox 7 http://caniuse.com/#search=text-overflow

  4. 0

    Si vous ajoutez un id balise div, vous pouvez utiliser document.getElementById("divid").innerHTML pour obtenir le contenu de la div. À partir de là, vous pouvez utiliser .length pour obtenir la longueur de la chaîne. Si la longueur de la chaîne est plus d'un certain seuil, il suffit de prendre une sous-chaîne et ajouter un "...".

    Vous devriez essayer de le faire côté serveur si vous le pouvez, cependant. En s'appuyant sur Javascript/CSS pour mettre en forme correctement pour l'utilisateur est un de moins que la solution idéale.

  5. 0

    Essayer le CSS text-overflow propriété.

  6. 0

    Plus probable de la situation, c'est que tu ne peux pas savoir le nombre de caractères qui va se tenir dans un élément du dom, étant donné qu'il a sa propre police, et ainsi de suite. CSS3 n'est pas actuellement une option (pour moi en tout cas). Donc, j'ai créer un peu div limites de l'écran et gardez le brouillage de tester des chaînes en elle jusqu'à ce que la largeur est correct:

    var text = 'Try to fit this text into 100 pixels!';
var max_width = 100;

var test = document.createElement('div');
test.className = 'Same Class as your real element';  //give it the same font, etc as a normal button
test.style.width = 'auto';
test.style.position = 'absolute';
test.style.left = '-2000px';
document.body.appendChild(test);            
test.innerHTML = text;

if ($(test).width() > max_width) {

    for (var i=text.length; i >= 0; i--) {
        test.innerHTML = text.substring(0, i) + '...';
        if ($(test).width() <= max_width) {
            text = text.substring(0, i) + '...';
            break;
        }
    }
}

document.body.removeChild(test);
  7. 0

    Façon la plus facile de raccourcir la variable à l'aide de JavaScript:

    function truncate(string, length){
    if (string.length > length)
        return string.substring(0,length)+'...';
    else
        return string;
};

    Inspiré par cette réponse: Je tiens à tronquer un texte ou en ligne avec des points de suspension à l'aide de JavaScript