我的CSS:
#content_right_head span
{
display:inline-block;
width:180px;
overflow:hidden !important;
}
现在它显示内容内容
但是我想展示 内容内容…
我需要在内容后面显示点。内容动态地来自数据库。
我的CSS:
#content_right_head span
{
display:inline-block;
width:180px;
overflow:hidden !important;
}
现在它显示内容内容
但是我想展示 内容内容…
我需要在内容后面显示点。内容动态地来自数据库。
当前回答
好吧,“文本溢出:省略号”为我工作,但只是如果我的限制是基于'宽度',我需要一个解决方案,可以应用于行(在'高度'而不是'宽度'),所以我做了这个脚本:
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)
})
我不知道这是否是性能需求的最佳实践,但对我来说是有效的。
其他回答
文本溢出:省略号只工作,如果你显示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;
var tooLong = document.getElementById("longText").value;
if (tooLong.length() > 18){
$('#longText').css('text-overflow', 'ellipsis');
}
首先,你做一个div标签设置宽度,在里面做p标签,然后添加文本,并应用下面给出的代码。 当你的p标签达到div标签的宽度时,“…”将被应用。
-
列表项
`div > p{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;}`
试试这个,
.truncate {
display:inline-block;
width:180px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
将.truncate class添加到元素中。
编辑,
上述解决方案并不是在所有浏览器中工作。你可以尝试使用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();
我认为你正在寻找文本溢出:省略与空白:nowrap结合
点击这里查看更多细节