Làm cách nào để tôi có thể hiển thị các dấu chấm (thời gian gần đây) trong một khoảng với tràn tràn ẩn?

CSS của tôi:

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

Bây giờ nó đang hiển thị nội dung

Nhưng tôi muốn hiển thị như nội dung ...

Tôi cần hiển thị dấu chấm sau nội dung. Nội dung đang đến động từ cơ sở dữ liệu.

Đối với điều này, bạn có thể sử dụng text-overflow: ellipsis;tài sản. Viết như thế này

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>

Câu đố

Nếu bạn đang sử dụng tràn văn bản: dấu chấm lửng, trình duyệt sẽ hiển thị nội dung bất cứ điều gì có thể trong vùng chứa đó. Nhưng nếu bạn muốn chỉ định số lượng chữ cái trước dấu chấm hoặc tước một số nội dung và thêm dấu chấm, bạn có thể sử dụng chức năng dưới đây.

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

gọi như

add3Dots("Hello World",9);

đầu ra

Hello Wor...

Nhìn thấy nó trong hành động ở đây

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

Tôi nghĩ rằng bạn đang tìm kiếm text-overflow: ellipsiskết hợp vớiwhite-space: nowrap

Xem thêm một số chi tiết tại đây

Thử cái này,

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

thêm .truncatelớp vào phần tử của bạn

EDIT ,

Giải pháp trên không hoạt động trong tất cả các trình duyệt. bạn có thể thử làm theo plugin jQuery với sự hỗ trợ của trình duyệt chéo.

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

gọi như thế nào

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

Chà, "văn bản tràn: dấu chấm lửng" hoạt động với tôi, nhưng chỉ khi giới hạn của tôi dựa trên 'chiều rộng', tôi cần một giải pháp có thể được áp dụng trên các dòng (trên 'chiều rộng' thay vì 'chiều rộng') Tôi đã làm kịch bản này:

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

Và khi tôi phải, ví dụ, h3 của tôi chỉ có 2 dòng tôi làm:

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

Tôi không biết nếu đó là cách tốt nhất cho nhu cầu thực hiện, nhưng đã làm việc cho tôi.

Bạn có thể thử điều này:

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

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

Cảm ơn rất nhiều @sandeep cho câu trả lời của anh ấy.

Vấn đề của tôi là tôi muốn hiển thị / ẩn văn bản trên span bằng cách nhấp chuột. Vì vậy, theo mặc định văn bản ngắn có dấu chấm được hiển thị và bằng cách nhấp vào văn bản dài xuất hiện. Nhấp lại lần nữa sẽ ẩn văn bản dài đó và hiển thị một lần nữa.

Điều khá dễ thực hiện: chỉ cần thêm / xóa lớp với văn bản tràn: dấu chấm lửng.

HTML:

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

CSS (giống như @sandeep với .cthonPulum đã thêm)

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

.cursorPointer {
  cursor: pointer;
}

Phần JQuery - về cơ bản chỉ cần loại bỏ / thêm lớp cSpanShortText.

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