搜索

首页  >  问答  >  正文

javascript - html元素有overflow事件吗?

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

伊谢尔伦伊谢尔伦2894 天前409

全部回复(8)我来回复

  • 怪我咯

    怪我咯2017-04-10 15:28:45

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

    回复
    0
  • 迷茫

    迷茫2017-04-10 15:28:45

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

    回复
    0
  • 伊谢尔伦

    伊谢尔伦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

    回复
    0
  • 黄舟

    黄舟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

    回复
    0
  • 迷茫

    迷茫2017-04-10 15:28:45

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

    回复
    0
  • 高洛峰

    高洛峰2017-04-10 15:28:45

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

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

    回复
    0
  • 黄舟

    黄舟2017-04-10 15:28:45

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

    回复
    0
  • 天蓬老师

    天蓬老师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;//否则等于原有的内容
        }
    

    回复
    0
  • 取消回复