一、最近做一个类似于微信评论的那种,文本太多展示不好看,就想着超过某一个界限让它可以出现全文,然后可以收起,查阅了很多资料,不凡是js太多,就是引入组件啥啥的,后来根据朋友的的链接找到了一篇css的,整理一下发给大家参考一下,不喜勿喷!
二、我这是结合vue来做的,但其实和vue没有多大关系。
三、上代码:html
<div class="text-box" v-for="(item,i) in 3">
<input :id="'tips'+i" class="tips" type="checkbox">
<div class="text-content">
<label class="label-tips" :for="'tips'+i"></label>
{{text}}
</div>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data() {
return {
text:`君不见,黄河之水天上来,奔流到海不复回。
君不见,高堂明镜悲白发,朝如青丝暮成雪!
人生得意须尽欢,莫使金樽空对月。
天生我材必有用,千金散尽还复来。
烹羊宰牛且为乐,会须一饮三百杯。
岑夫子,丹丘生,将进酒,杯莫停。
与君歌一曲,请君为我倾耳听。
钟鼓馔玉不足贵,但愿长醉不复醒。
古来圣贤皆寂寞,惟有饮者留其名。
陈王昔时宴平乐,斗酒十千恣欢谑。
主人何为言少钱,径须沽取对君酌。
五花马、千金裘,呼儿将出换美酒,与尔同销万古愁!`
}
},
mounted() {},
methods: {}
})
</script>
四:css
.text-box {
display: flex;
margin: 3.125rem auto;
width: 37.5rem;
overflow: hidden;
border-radius: 0.625rem;
}
.text-content {
font-size: 1rem;
overflow: hidden;
text-overflow: ellipsis;
text-align: justify;
position: relative;
line-height: 1.875rem;
max-height: 3.75rem;
transition: .2s max-height;
}
.text-content::before {
content: '';
height: calc(100% - 1.625rem);
float: right;
}
.text-content::after {
content: '';
width: 100%;
height: 100%;
position: absolute;
background: #fff;
}
.label-tips {
position: relative;
float: right;
clear: both;
margin-left: 1.25rem;
font-size: 1rem;
padding: 0 0.375rem;
background: #F0F0F0;
line-height: 1.5rem;
border-radius: 0.375rem;
color: #909090;
cursor: pointer;
}
.label-tips::after {
content: '全文'
}
.tips {
display: none;
}
.tips:checked+.text-content {
max-height: 18.75rem;
}
.tips:checked+.text-content::after {
visibility: hidden;
}
.tips:checked+.text-content .label-tips::before {
visibility: hidden;
}
.tips:checked+.text-content .label-tips::after {
content: '收起'
}
.label-tips::before {
content: '...';
position: absolute;
left: -0.3125rem;
color: #333;
transform: translateX(-100%)
}