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

其他回答

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

我认为你正在寻找文本溢出:省略与空白:nowrap结合

点击这里查看更多细节

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

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

JSFiddle

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

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

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

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

-

列表项

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