怎么样控制div显示的内容超过设定高度就会自动折叠起来？

怎样可以实现div显示的内容超过设定高度就会自动折叠起来，然后点击展开/收起按钮可以展开全部内容或者把内容收起来？

类似于这种：

---

实现思路是：检测一下文字的个数，超过的话，使用summary和details元素显示隐藏文字，不需要额外的使用css和js，可以参考一下文档：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details

---

我觉得这里像是根据文字的个数来判断的，如果超出了规定的字数，那么只显示前面一部分文字。
我写了一个简单的DEMO： http://codepen.io/CodingMonkeyzh/pen/Jdprxv

---

1、如果指定高度，用js来判断容器高度，达到指定高度后控制内容的折叠/展开

2、如果容器的高度是被内容撑开的，可以考虑设定字符数来控制折叠/展开

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

当字符数超过150时，就折叠超出部分的内容

---

你把那个功能网址发过来，我分析一下，它是怎么实现的，靠css做到多行省略，对于我来说，做不到。