评论 展开|收起

场景：

列表中文本最多三行，超出部分省略，并显示展开收起按钮，如果文本没有超出三行则不显示展开收起按钮

方案：

1）在div 中添加一个span 然后给div设置超出三行省略，这时候就可以获取到文本高度和div高度了

优点：能很好的限制超出行数做展开|收起，低于某个行数全部显示；且对换行空格也有效
缺点：像评论列表这种内容很不固定的，手机上会发现判断有误，需要进一步优化。后我想到一个折中办法是把判断字符串长度的判断也加上可以弥补一下

2）根据字符串长度判断是否做展开|收起、单行|双行显示处理

特点：简单粗暴
缺点：对于有换行字符的，无法准确定位行数
适用场景：大段简介、标题单行|双行切换显示

{
    {weekInfo[0].title | ellipsis }}

filters: {
        ellipsis(value) {
            if (!value) return "";
            if (value.length <= 18) {
                return value.slice(0, 14) + "...";
            }
            if (value.length > 18) {
                return value.slice(0, 33) + "...";
            }
            return value;
        }
    }

3）根据行数限制通过文字行高计算显示块的高度

特点：效果可以
缺点：代码量大；对有换行符的情况不适用，长段表情类评论显示有问题
思路：

首先得判断文本自否超过四行，因为这些一般都是是前端异步请求然后后端发送过来，在组长的指导下，使用了 Vue 中的 nextTick 来监听 DOM 中是数据变化。
接下来主要是 css 上的思路，其实上图可以分为两部分，如下图，标号1的部分展示前面三行，标号为2的部分会根据1的行数判断缩进的大小，然后展示第四行。最后通过背景色的控制让两者看上去是一段文字。