我的CSS:

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

现在它显示内容内容

但是我想展示 内容内容…

我需要在内容后面显示点。内容动态地来自数据库。


当前回答

如果你正在使用ES6,它可以用三元操作符和模板字面量来创建

function add3Dots(text, limit)
{
    return text.length > limit ? `${text.substring(0, limit)}...` : text;
}

其他回答

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

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

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

如果你正在使用ES6,它可以用三元操作符和模板字面量来创建

function add3Dots(text, limit)
{
    return text.length > limit ? `${text.substring(0, limit)}...` : text;
}

非常感谢@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);
    }
  }

首先,你做一个div标签设置宽度,在里面做p标签,然后添加文本,并应用下面给出的代码。 当你的p标签达到div标签的宽度时,“…”将被应用。

-

列表项

`div > p{
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;}` 

如果您使用的是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...

在这里看到它的行动

函数add3Dots(字符串,限制) { Var dots = "…"; 如果字符串。长度>限制) { //你也可以用substr代替substring String = String .substring(0,limit) + dots; } 返回字符串; } console.log(add3Dots("你好,你今天过得怎么样?",10));