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

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

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

【一、前端界面默认显示N行】最多显示三行。在超过三行的时候只显示三行，末尾显示一个全部，点击能够展开

文章图片
%}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"; } }