ฉันจะแสดงจุด (“ …”) ในช่วงที่มีการล้นที่ซ่อนอยู่ได้อย่างไร

CSS ของฉัน:

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

ตอนนี้มันแสดงเนื้อหาเนื้อหา

แต่ฉันต้องการแสดง เนื้อหาเนื้อหา ...

ฉันต้องการแสดงจุดหลังเนื้อหา เนื้อหากำลังมาจากฐานข้อมูลแบบไดนามิก

สำหรับสิ่งนี้คุณสามารถใช้text-overflow: ellipsis;คุณสมบัติ เขียนแบบนี้

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

หากคุณใช้ text-overflow: ellipsis เบราว์เซอร์จะแสดงเนื้อหาที่เป็นไปได้ภายในคอนเทนเนอร์นั้น แต่ถ้าคุณต้องการระบุจำนวนตัวอักษรก่อนจุดหรือตัดเนื้อหาบางส่วนและเพิ่มจุดคุณสามารถใช้ฟังก์ชั่นด้านล่าง

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

โทรเหมือน

add3Dots("Hello World",9);

เอาท์พุท

Hello Wor...

ดูการทำงานจริงได้ที่นี่

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

ฉันคิดว่าคุณกำลังมองหา text-overflow: ellipsisร่วมกับwhite-space: nowrap

ดูรายละเอียดเพิ่มเติมได้ที่นี่

ลองนี้

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

เพิ่ม.truncateคลาสให้กับองค์ประกอบของคุณ

แก้ไข ,

วิธีการแก้ปัญหาข้างต้นไม่ได้ทำงานในเบราว์เซอร์ทั้งหมด คุณสามารถลองใช้ปลั๊กอิน jQuery ด้วยการสนับสนุนข้ามเบราว์เซอร์

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

วิธีการโทร

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

"text-overflow: ellipsis" ใช้งานได้สำหรับฉัน แต่ถ้าขีด จำกัด ของฉันขึ้นอยู่กับ 'width' ฉันต้องการโซลูชันที่สามารถใช้กับบรรทัด (บน 'ความสูง' แทน 'width') ดังนั้น ฉันทำสคริปต์นี้:

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

และเมื่อฉันต้องยกตัวอย่างเช่น h3 ของฉันมีเพียง 2 บรรทัดฉัน:

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

ฉันไม่รู้ว่านี่เป็นวิธีปฏิบัติที่ดีที่สุดสำหรับความต้องการด้านประสิทธิภาพ แต่ก็ใช้ได้สำหรับฉัน

คุณสามารถลองสิ่งนี้:

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

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

ขอบคุณมากสำหรับคำตอบของเขา

ปัญหาของฉันคือฉันต้องการที่จะแสดง / ซ่อนข้อความในช่วงเวลาด้วยการคลิกเมาส์ ดังนั้นโดยค่าเริ่มต้นข้อความสั้น ๆ ที่มีจุดจะปรากฏขึ้นและโดยการคลิกที่ข้อความยาวปรากฏขึ้น การคลิกอีกครั้งจะเป็นการซ่อนข้อความที่ยาวและแสดงอีกครั้งหนึ่งสั้น ๆ

สิ่งที่ต้องทำค่อนข้างง่ายเพียงเพิ่ม / ลบคลาสที่มี text-overflow: ellipsis

HTML:

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

CSS (เหมือนกับ @sandeep พร้อม. cursorPointer ที่เพิ่ม)

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

.cursorPointer {
  cursor: pointer;
}

ส่วน JQuery - เพียงแค่ลบ / เพิ่มคลาส cSpanShortText

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