一、前端界面默认显示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
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";
}
}
推荐阅读
- 一个人的旅行,三亚
- 一个小故事,我的思考。
- 《真与假的困惑》???|《真与假的困惑》??? ——致良知是一种伟大的力量
- 开学第一天(下)
- 一个人的碎碎念
- 野营记-第五章|野营记-第五章 讨伐梦魇兽
- 2018年11月19日|2018年11月19日 星期一 亲子日记第144篇
- 遇到一哭二闹三打滚的孩子,怎么办┃山伯教育
- 第326天
- Shell-Bash变量与运算符