Come posso mostrare i punti ("...") in un arco con overflow nascosto?

Il mio CSS:

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

Ora mostra contenuti

Ma voglio mostrare contenuti simili ...

Devo mostrare punti dopo i contenuti. I contenuti provengono in modo dinamico dal database.

Per questo puoi usare la text-overflow: ellipsis;proprietà. Scrivi così

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

Se si utilizza il testo overflow: puntini di sospensione, il browser mostrerà il contenuto, per quanto possibile, all'interno di quel contenitore. Ma se si desidera specificare il numero di lettere prima dei punti o rimuovere alcuni contenuti e aggiungere punti, è possibile utilizzare la funzione seguente.

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

chiama come

add3Dots("Hello World",9);

uscite

Hello Wor...

Guardalo in azione qui

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

Penso che tu stia cercando text-overflow: ellipsis in combinazione conwhite-space: nowrap

Vedi altri dettagli qui

Prova questo,

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

aggiungi .truncateclasse al tuo elemento.

EDIT ,

La soluzione sopra non funziona in tutti i browser. puoi provare a seguire il plug-in jQuery con supporto per più browser.

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

come chiamare,

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

Bene, il "overflow del testo: puntini di sospensione" ha funzionato per me, ma solo se il mio limite era basato su "larghezza", avevo bisogno di una soluzione che potesse essere applicata su linee (su "altezza" anziché "larghezza"), quindi Ho fatto questo 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()+'...');
    }
}

E quando devo, ad esempio, che il mio h3 abbia solo 2 righe, lo faccio:

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

Non so se quella fosse la migliore pratica per le esigenze prestazionali, ma ha funzionato per me.

Puoi provare questo:

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

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

Grazie mille @sandeep per la sua risposta.

Il mio problema era che volevo mostrare / nascondere il testo sull'intervallo con un clic del mouse. Quindi, per impostazione predefinita, viene mostrato un breve testo con punti e facendo clic su un testo lungo appare. Fare di nuovo clic per nascondere quel testo lungo e mostrarlo di nuovo breve.

Cosa abbastanza facile da fare: basta aggiungere / rimuovere la classe con text-overflow: ellissi.

HTML:

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

CSS (uguale a @sandeep con .cursorPointer aggiunto)

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

.cursorPointer {
  cursor: pointer;
}

Parte JQuery: sostanzialmente rimuove / aggiunge la classe cSpanShortText.

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