Javascript: Ajouter des ellipses au texte HTML selon la taille du conteneur

Question

J'ai une div qui contient du texte. Le texte devrait être raccourci à deux lignes et "..." ajouté à la fin pour indiquer qu'il y en a plus. Comme la police et la taille de la police peuvent varier en fonction des paramètres de différents utilisateurs (par exemple: les paramètres du navigateur "taille du texte", les différents navigateurs, etc.), je dois le faire dynamiquement du côté client.

Quelle est la meilleure stratégie pour cela?
Merci.

Answer 1

Il existe quelques fonctionnalités CSS que Microsoft a mises au point et auxquelles les développeurs d'Internet Explorer ont depuis longtemps accès. Une de ces caractéristiques est la propriété text-overflow, qui is now in CSS3 et a des implémentations dans Safari et Opera. Cependant, firefox ne supporte toujours pas cette fonctionnalité.

Pour une implémentation JavaScript du navigateur croix de la fonction de points de suspension pour le cadre jQuery, vous pouvez être intéressé à vérifier l'article suivant:

• Ajaxian - Text-Overflow for Firefox via jQuery

---

MISE À JOUR:

Depuis jQuery n'est pas un o ption, vous pouvez vérifier les points suivants:

• Javascript Tutorial - How to Auto Ellipse Text
• JavaScript Ellipsis or Cross-Browser "truncate with dots"
• Ajaxian - Ellipsis or "truncate with dots" via JavaScript

Answer 2

Vous devez définir le nombre de caractères dans le texte que vous voulez voir. Parcourez ensuite le texte avec une boucle for, jusqu'à ce que vous atteigniez le nombre de caractères défini tout en enregistrant les caractères que vous avez traversés dans une variable de chaîne. Une fois que vous avez atteint le nombre de caractères défini, la boucle for se termine et vous ajoutez la chaîne "..." à la variable de chaîne de construction. C'est votre nouveau texte pour le conteneur. Voici un code:

nchars = 50; 
div = document.getElementById("your_div_with_text"); 
divText = div.innerHTML; 
newDivText = ""; 
for(var i = 0; i < nchars; i++){ 
    newDivText += divText[i]; 
} 
newDivText += "..."; 
div.innerHTML = newDivText; 

En ce qui concerne la question avec les polices et la taille de la police, vous pouvez probablement définir une classe CSS contenant la taille de la police et de la famille de police, qui avait l'air le meilleur dans tous les navigateurs.