Bagaimana saya bisa menunjukkan titik ("...") dalam rentang dengan luapan tersembunyi?

CSS saya:

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

Sekarang menampilkan konten konten

Tapi saya ingin menunjukkan konten seperti konten ...

Saya perlu menunjukkan titik setelah konten. Konten datang secara dinamis dari database.

Untuk ini, Anda dapat menggunakan text-overflow: ellipsis;properti. Tulis seperti ini

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

Jika Anda menggunakan text-overflow: ellipsis, browser akan menampilkan konten apa pun yang mungkin dalam wadah itu. Tetapi jika Anda ingin menentukan jumlah huruf sebelum titik atau menghapus beberapa konten dan menambahkan titik, Anda dapat menggunakan fungsi di bawah ini.

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

panggilan seperti

add3Dots("Hello World",9);

output

Hello Wor...

Lihat beraksi di sini

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

Saya pikir Anda mencari text-overflow: ellipsisdalam kombinasi denganwhite-space: nowrap

Lihat lebih detail di sini

Coba ini,

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

tambahkan .truncatekelas ke elemen Anda.

EDIT ,

Solusi di atas tidak berfungsi di semua browser. Anda dapat mencoba mengikuti plugin jQuery dengan dukungan lintas 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);

bagaimana cara menelepon,

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

Ya, "text-overflow: ellipsis" bekerja untuk saya, tetapi hanya jika batas saya didasarkan pada 'lebar', saya membutuhkan solusi yang dapat diterapkan pada garis (pada 'tinggi' bukan 'lebar') jadi Saya melakukan skrip ini:

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

Dan ketika saya harus, misalnya, bahwa h3 saya hanya memiliki 2 baris saya lakukan:

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

Saya tidak tahu apakah itu praktik terbaik untuk kebutuhan kinerja, tetapi berhasil untuk saya.

Anda dapat mencoba ini:

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

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

Terima kasih banyak @ tetaplah untuk jawabannya.

Masalah saya adalah saya ingin menampilkan / menyembunyikan teks pada rentang dengan klik mouse. Jadi secara default teks pendek dengan titik-titik ditampilkan dan dengan mengklik teks panjang muncul. Mengklik lagi menyembunyikan teks panjang itu dan menampilkan teks pendek lagi.

Cukup mudah untuk dilakukan: cukup tambahkan / hapus kelas dengan teks-overflow: ellipsis.

HTML:

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

CSS (sama dengan @sandeep dengan .cursorPointer ditambahkan)

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

.cursorPointer {
  cursor: pointer;
}

Bagian JQuery - pada dasarnya hanya menghapus / menambahkan kelas cSpanShortText.

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