Comment puis-je afficher des points («…») dans une plage avec un débordement masqué?

Mon CSS:

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

Maintenant, il affiche le contenu du contenu

Mais je veux montrer comme du contenu de contenu ...

J'ai besoin d'afficher des points après le contenu. Le contenu provient dynamiquement de la base de données.

Pour cela, vous pouvez utiliser la text-overflow: ellipsis;propriété. Ecrire comme ça

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

<span>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</span>

JSFiddle

Si vous utilisez text-overflow: ellipsis, le navigateur affichera le contenu autant que possible dans ce conteneur. Mais si vous souhaitez spécifier le nombre de lettres avant les points ou supprimer du contenu et ajouter des points, vous pouvez utiliser la fonction ci-dessous.

function add3Dots(string, limit)
{
  var dots = "...";
  if(string.length > limit)
  {
    // you can also use substr instead of substring
    string = string.substring(0,limit) + dots;
  }

    return string;
}

appeler comme

add3Dots("Hello World",9);

les sorties

Hello Wor...

Voyez-le en action ici

function add3Dots(string, limit)
{
  var dots = "...";
  if(string.length > limit)
  {
    // you can also use substr instead of substring
    string = string.substring(0,limit) + dots;
  }

    return string;
}



console.log(add3Dots("Hello, how are you doing today?", 10));

Je pense que vous recherchez text-overflow: ellipsisen combinaison avecwhite-space: nowrap

Voir plus de détails ici

Essaye ça,

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

ajoutez une .truncateclasse à votre élément.

MODIFIER ,

La solution ci-dessus ne fonctionne pas dans tous les navigateurs. vous pouvez essayer de suivre le plugin jQuery avec la prise en charge de plusieurs 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();

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

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

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

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

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

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

Vous pouvez essayer ceci:

.classname{
    width:250px;
    overflow:hidden;
    text-overflow:ellipsis;
}

 var tooLong = document.getElementById("longText").value;
    if (tooLong.length() > 18){
        $('#longText').css('text-overflow', 'ellipsis');
    }

Merci beaucoup @sandeep pour sa réponse.

Mon problème était que je voulais afficher / masquer le texte sur une plage avec un clic de souris. Ainsi, par défaut, le texte court avec des points est affiché et en cliquant sur le texte long apparaît. Cliquer à nouveau masque ce long texte et en affiche à nouveau un court.

Chose assez simple à faire: ajoutez / supprimez simplement une classe avec text-overflow: ellipsis.

HTML:

<span class="spanShortText cursorPointer"  onclick="fInventoryShippingReceiving.ShowHideTextOnSpan(this);">Some really long description here</span>

CSS (identique à @sandeep avec .cursorPointer ajouté)

.spanShortText {
  display: inline-block;
  width: 100px;
  white-space: nowrap;
  overflow: hidden !important;
  text-overflow: ellipsis;
}

.cursorPointer {
  cursor: pointer;
}

Partie JQuery - supprime / ajoute simplement la classe cSpanShortText.

  function ShowHideTextOnSpan(element) {
    var cSpanShortText = 'spanShortText';
    var $el = $(element);
    if ($el.hasClass(cSpanShortText)) {
      $el.removeClass(cSpanShortText)
    } else {
      $el.addClass(cSpanShortText);
    }
  }