一个p元素,拥有固定宽度与最大高度。动态的向其中添加文本内容,当其内容溢出的时候,停止添加,并在内容后面添加“...”这样的省略号,不知道该怎样实现,我好像没看到有overflow事件。
伊谢尔伦2017-04-10 15:28:45
没有overflow
事件,但是,可以借助Clamp.js实现这个效果。
一个简单的示例:
//设定3行
$clamp(myHeader, {clamp: 3});
//设定固定的高度
$clamp(myParagraph, {clamp: '35px'});
当然,利用CSS3 的line-clamp
也是可以实现的:
DEMO:http://codepen.io/martinwolf/pen/qlFdp
黄舟2017-04-10 15:28:45
1、js实现:
function()
{
var maxwidth=15;
if($(this).text().length>maxwidth)
{
$(this).text($(this).text().substring(0,maxwidth));
$(this).text($(this).text()+'......');
}
}
maxwidth是你要设置的最大字符(根据你的固定宽度来设置)
2、css实现:
.xxx{
wihte-space:no-wrap;
overflow:hidden;
text-overflow: ellipsis;
}
另外一种方式
.xxx {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-height: 20px;
max-height: 60px;
}
相关问题:http://segmentfault.com/q/1010000002757501/a-1020000002757783
高洛峰2017-04-10 15:28:45
没怎么看明白标题和描述。不过好像说的是多文本变成'...'吧?
给p加以下属性就好
css
white-space:nowrap overflow:hidden text-overflow: ellipsis;
天蓬老师2017-04-10 15:28:45
@禅猫
js实现的方法
var maxwidth = 120;//最多字符
var contents = "";//添加一个空变量
if (data.rows[i].Content.length > maxwidth) {//判断动态获取的字符串长度是否大于maxwidth
contents = data.rows[i].Content.substring(0, maxwidth) + "………";//如果大于则向最后添加...
} else {
contents = data.rows[i].Content;//否则等于原有的内容
}