- 默認顯示三行胚膊，超過三行的直接進行隱藏:(英雄陣容的詳情頁)
.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.點擊展開閱讀全文(容器的高度依據(jù)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";
}
}
