vue +纯CSS 实现多行文本“展开收起”

一、最近做一个类似于微信评论的那种，文本太多展示不好看，就想着超过某一个界限让它可以出现全文，然后可以收起，查阅了很多资料，不凡是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%)
}