文本溢出:省略号只工作，如果你显示1行。如果更多，你可以使用display: -webkit-box属性，以防你想显示更多一行。代码如下2行。

line-height: 1.6rem;
overflow: hidden;
display: -webkit-box; 
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
max-height: 3.2rem;

非常感谢@sandeep的回答。

我的问题是，我想显示/隐藏文本的跨度与鼠标点击。因此，默认情况下，短文本与点显示，并通过点击长文本出现。再次单击会隐藏长文本并再次显示短文本。

非常简单的事情:只需添加/删除类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);
    }
  }

你可以试试这个:

.classname { 宽度:250 px; 溢出:隐藏; 文本溢出:省略; ｝

好吧，“文本溢出:省略号”为我工作，但只是如果我的限制是基于'宽度'，我需要一个解决方案，可以应用于行(在'高度'而不是'宽度')，所以我做了这个脚本:

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

我不知道这是否是性能需求的最佳实践，但对我来说是有效的。

为此，您可以使用text-overflow: ellipsis;财产。像这样写

跨度{ 显示:inline-block; 宽度:180 px; 空白:nowrap;} 溢出:隐藏!重要; 文本溢出:省略; } Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿了一大堆铅字，把它们胡乱拼凑成一本铅字样本书</span>

JSFiddle

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