Comment puis-je afficher des points de suspension ("...") dans une balise span avec un débordement caché ?

Question

Mes CSS :

#content_right_head span
{
  display:inline-block;
  width:180px;
  overflow:hidden !important;
}

Maintenant il affiche contenu du contenu

Mais je veux afficher comme contenu du contenu ...

Je dois afficher des points après les contenus. Les contenus viennent dynamiquement de la base de données.

Answer 1

Pour ce faire, vous pouvez utiliser la propriété text-overflow: ellipsis;. Écrivez comme ceci

span {
    display: inline-block;
    width: 180px;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
}

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book

JSFiddle

Answer 2

Si vous utilisez text-overflow:ellipsis, le navigateur affichera le contenu dans la mesure du possible à l'intérieur de ce conteneur. Mais si vous voulez spécifier le nombre de lettres avant les points de suspension ou supprimer certains contenus et ajouter des points de suspension, vous pouvez utiliser la fonction ci-dessous.

function add3Dots(string, limit)
{
  var dots = "...";
  if(string.length > limit)
  {
    // vous pouvez également utiliser substr à la place de substring
    string = string.substring(0,limit) + dots;
  }

    return string;
}

appeler comme

add3Dots("Bonjour le monde",9);

résultats

Bonjour l...

Voyez-le en action ici

function add3Dots(string, limit)
{
  var dots = "...";
  if(string.length > limit)
  {
    // vous pouvez également utiliser substr à la place de substring
    string = string.substring(0,limit) + dots;
  }

    return string;
}

console.log(add3Dots("Bonjour, comment vas-tu aujourd'hui?", 10));

Answer 3

Je pense que vous cherchez text-overflow: ellipsis en combinaison avec white-space: nowrap

Voir plus de détails ici

Answer 4

Essayez ceci,

.truncate {
    display:inline-block;
    width:180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

ajoutez la classe .truncate à votre élément.

---

MODIFIER,

La solution ci-dessus ne fonctionne pas dans tous les navigateurs. Vous pouvez essayer le plugin jQuery suivant avec prise en charge multi-navigateurs.

(function ($) {
    $.fn.ellipsis = function () {
        return this.eachAsync({
            delay: 100,
            bulk: 0,
            loop: function (index) {
                var el = $(this);

                if (el.data("fullText") !== undefined) {
                    el.html(el.data("fullText"));
                } else {
                    el.data("fullText", el.html());
                }

                if (el.css("overflow") == "hidden") {
                    var text = el.html();
                    var t = $(this.cloneNode(true))
                                        .hide()
                                        .css('position', 'absolute')
                                        .css('overflow', 'visible')
                                        .width('auto')
                                        .height(el.height())
                                        ;

                    el.after(t);

                    function width() { return t.width() > el.width(); };

                    var func = width;
                    while (text.length > 0 && width()) {
                        text = text.substr(0, text.length - text.length * 25 / 100);
                        t.html(text + "...");
                    }

                    el.html(t.html());
                    t.remove();
                }
            }
        });
    };
})(jQuery);

comment appeler,

$("#content_right_head span").ellipsis();

Answer 5

Eh bien, le "text-overflow: ellipsis" a fonctionné pour moi, mais seulement si ma limite était basée sur la 'largeur', j'avais besoin d'une solution qui peut être appliquée sur des lignes (sur la 'hauteur' au lieu de la 'largeur'), alors j'ai fait ce script :

function listLimit (elm, ligne){
    var hauteurMax = parseInt(elm.css('line-Height'))*ligne;

    while(elm.height() > hauteurMax){
        var texte = elm.text();
        elm.text(texte.substring(0,texte.length-10)).text(elm.text()+'...');
    }
}

Et quand je dois, par exemple, que mon h3 a seulement 2 lignes je fais :

$('h3').each(function(){
   listLimit ($(this), 2)
})

Je ne sais pas si c'était la meilleure pratique pour des besoins de performance, mais ça a fonctionné pour moi.