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

Question

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

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

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

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

不是每一行末尾都显示

不知该怎么做？

Answer 1

用js实现：

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

maxwidth是设置的最大字符数

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

Answer 2

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

Answer 3

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