Wie kann ich Punkte („…“) in einem Bereich mit verstecktem Überlauf anzeigen?

Mein CSS:

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

Jetzt werden Inhaltsinhalte angezeigt

Aber ich möchte gerne Inhalte anzeigen ...

Ich muss Punkte nach dem Inhalt anzeigen. Inhalte kommen dynamisch aus der Datenbank.

Hierfür können Sie text-overflow: ellipsis;Eigenschaft verwenden. Schreiben Sie so

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

Wenn Sie Text-Überlauf: Auslassungspunkte verwenden, zeigt der Browser den Inhalt an, was auch immer in diesem Container möglich ist. Wenn Sie jedoch die Anzahl der Buchstaben vor den Punkten angeben oder einige Inhalte entfernen und Punkte hinzufügen möchten, können Sie die folgende Funktion verwenden.

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;
}

Anruf wie

add3Dots("Hello World",9);

Ausgänge

Hello Wor...

Sehen Sie es hier in Aktion

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));

Ich denke, Sie suchen text-overflow: ellipsisin Kombination mitwhite-space: nowrap

Weitere Details finden Sie hier

Versuche dies,

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

Fügen Sie .truncateIhrem Element eine Klasse hinzu.

EDIT ,

Die oben genannte Lösung funktioniert nicht in allen Browsern. Sie können versuchen, dem jQuery-Plugin mit browserübergreifender Unterstützung zu folgen.

(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);

wie man anruft,

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

Nun, der "Textüberlauf: Auslassungspunkte" hat bei mir funktioniert, aber nur wenn mein Limit auf "Breite" basiert, habe ich eine Lösung benötigt, die auf Linien angewendet werden kann (auf der "Höhe" anstelle der "Breite") Ich habe dieses Skript gemacht:

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()+'...');
    }
}

Und wenn ich zum Beispiel muss, dass mein h3 nur 2 Zeilen hat, mache ich:

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

Ich weiß nicht, ob dies die beste Vorgehensweise für Leistungsanforderungen war, habe aber für mich gearbeitet.

Sie können dies versuchen:

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

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

Vielen Dank @sandeep für seine Antwort.

Mein Problem war, dass ich Text in der Spanne mit einem Mausklick ein- / ausblenden möchte. Standardmäßig wird also Kurztext mit Punkten angezeigt und durch Klicken auf Langtext wird angezeigt. Durch erneutes Klicken wird dieser lange Text ausgeblendet und der kurze Text erneut angezeigt.

Ganz einfach: Einfach Klasse mit Textüberlauf hinzufügen / entfernen: Auslassungspunkte.

HTML:

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

CSS (wie @sandeep mit hinzugefügtem .cursorPointer)

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

.cursorPointer {
  cursor: pointer;
}

JQuery-Teil - entfernt / fügt im Grunde nur die Klasse cSpanShortText hinzu.

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