文本溢出显示省略号时展示‘查看更多’按钮

问题：

        元素宽度100%，宽度会随着浏览器缩放而变化。元素内文本超过4行时显示省略号，同时展示‘更多’按钮，点击更多按钮展示全部文本。如下图所示

分析：

        文本超出4行显示省略号可以通过display box实现，但是超出后展示‘更多’按钮不好处理，因为无法得知文本是否展示省略号。在行高固定20px的情况下，通过js获取元素高度也可以计算出文本的行数，又因为宽度会跟随浏览器宽度变化，所以需要监听resize事件，实时获取元素高度，计算行数。这样处理也可以满足需求，只是太过复杂，而且在resize事件中实时获取元素高度再计算，可能会卡顿。对于样式问题，尽可能的通过样式来处理，下面介绍另一种实现方案。

解决方法：

• content是用来展示的元素，最大高度80px（四行高度），超出隐藏。
• virtual是content的子元素，相对于content绝对定位，top为-20px（负一行高度），virtual内的文本和content相同，宽度也和content相同，virtual字体透明不显示，最大高度100px（五行高度），超出隐藏。
• more是更多按钮，相对virtual绝对定位，top为80px（定位在virtual的第五行），背景白色（为了遮挡底部文本）。

        所以：

1. content的内容小于四行时，virtual的内容小于四行，超出隐藏，more不展示
2. content的内容到了第四行但未超出第四行时，virtual内容小于五行，more不展示
3. content的内容超出四行时，virtual内容大于等于五行，more展示

        其他点击‘更多’按钮展示全部文本等实现很简单，就不再补充