javascript - html元素有overflow事件吗？

Question

一个p元素，拥有固定宽度与最大高度。动态的向其中添加文本内容，当其内容溢出的时候，停止添加，并在内容后面添加“...”这样的省略号，不知道该怎样实现，我好像没看到有overflow事件。

Answer 1

可以参考这里
http://www.css88.com/archives/5206

Answer 2

这个我也不清楚,不过一般不是这样做的吧,主要在显示部分body来处理,你说body有这个属性吗?

Answer 3

没有overflow事件，但是，可以借助Clamp.js实现这个效果。

一个简单的示例：

//设定3行
$clamp(myHeader, {clamp: 3});
//设定固定的高度
$clamp(myParagraph, {clamp: '35px'});

当然，利用CSS3 的line-clamp也是可以实现的：
DEMO：http://codepen.io/martinwolf/pen/qlFdp

Answer 4

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

Answer 5

你这个应该是CSS做的，当然，如果你的需求复杂性到达一定的高度也可以借助JS实现，比如计算字符的个数和宽度，如楼上的答案。

Answer 6

没怎么看明白标题和描述。不过好像说的是多文本变成'...'吧？
给p加以下属性就好

css  white-space:nowrap
  overflow:hidden
  text-overflow: ellipsis;

Answer 7

楼主想要的结果，其实就是楼上那样子的答案，就是当内容超过固定宽度的时候显示省略号，内容还是有的，哈哈

Answer 8

@禅猫
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;//否则等于原有的内容
    }