一、前端界面默认显示N行

1. 默认显示三行，超过三行的直接进行隐藏:(英雄阵容的详情页)

   .description{
        overflow : hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }

2. 最多显示三行。在超过三行的时候只显示三行，末尾显示一个全部，点击能够展开

   
   
   

   %}1WI%R2K2`~VZ5%O~F{B)A.jpg

HTML:

CSS:

.question-description{
             position:relative;
             line-height:25px;
             /* 3 times the line-height to show 3 lines */
             /*height:60px;*/
             overflow:hidden;
             font-size: 13px;
         }
        .question-description::after{
            display: none;
            font-size: 13px;
            color:#5FADD9;
            content:"全文";
            font-weight:bold;
            position:absolute;
            bottom:0;
            right:0;
            padding:0 20px 1px 45px;
            background:url(http://css88.b0.upaiyun.com/css88/2014/09/ellipsis_bg.png) repeat-y;
        }

JS:

updated:function(){
          // 问题描述内容，如果不超过三行
            if((this.$refs.description.offsetHeight) > 75){
                this.$refs.description.style.height = 75 + "px";
                document.styleSheets[0].addRule('.question-description::after','display: block');
            }
}

3.点击展开阅读全文(容器的高度依据line-height进行定位)

@Q(NT(V}X~@%Z`6DD1I@9)K.png

HTML:

      展开阅读全文

JS:

     //  初步获得对应的值
            for(var i = 0;i < this.$refs.answerHeight.length;i++){
//                console.log(this.$refs.answerHeight[i]);
//                console.log(this.$refs.answerHeight[i].offsetHeight);
                // 这里的之也是需要转化为rem之后进行计算的
                if(this.$refs.answerHeight[i].offsetHeight > 500){
                    this.$refs.answerHeight[i].style.height = 500 + "px";
                    this.$refs.answerHeight[i].nextElementSibling.style.display = "block";
                    this.$refs.answerHeight[i].parentNode.nextElementSibling.style.display = "block";
                }
            }