给一个放多行文字的div,最后加一行文字末尾加省略号?

假如这个div height为50px,width为160px,最多分三行

文字从服务器得到数据,如果超过第三行的长度在末尾加个...省略号。

问题是得到文本长度不固定,可能就几个字,不超一行。也有可能很多,超三行。

我知道有text-overflow:ellipsis这个属性,但我只想在超过的第三行末尾显示,

不是每一行末尾都显示

不知该怎么做?

阅读 9.1k
3 个回答

用js实现:

            function()
            {
                 var maxwidth=15;
                 if($(this).text().length>maxwidth)
                 {
                    $(this).text($(this).text().substring(0,maxwidth));
                    $(this).text($(this).text()+'......');
                 }
            }

maxwidth是设置的最大字符数

张大大对这个有研究:关于文字内容溢出用点点点(…)省略号表示

CSS3 可以设置text-overflow:ellipsis
不用CSS3的话就只能添加js代码判断了

可以考虑在server端渲染模板时处理

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题