- 默认显示三行，超过三行的直接进行隐藏:(英雄阵容的详情页)
.description{
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
-
最多显示三行。在超过三行的时候只显示三行，末尾显示一个全部，点击能够展开
%}1WI%R2K2`~VZ5%O~F{B)A.jpg
HTML:
<div ref="description" class="question-description"
@click="descriptionExpand($event)">
</div>
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:
<!--点击展开-->
<div @click="clickExpand($event)" style="display: none;width:6rem;height: 1.2rem;line-height: 1.2rem;font-size: 0.65rem;color:#2a90d7;margin:0 auto;background-color:#ecf7fd;text-align: center;border-radius: 4px;">
展开阅读全文
</div>
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";
}
}
