超过n行显示...并且显示【展开】/【收起】 #14
Description
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" >
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1">
<title>xxx</title>
<style type="text/css">
.text {
display: -webkit-box;
-webkit-line-clamp: 6;
-webkit-box-orient: vertical;
overflow: hidden;
}
/*label {
display: none;
}
label::after {
content: "显示更多";
}
.text.truncated + label {
display: block;
}
.text.truncated + label::after {
content: "点击收起";
}*/
input[name="toggle"]:checked + p {
-webkit-line-clamp: unset;
}
input[name="toggle"] ~ label::after {
content: "显示更多";
}
input[name="toggle"]:checked ~ label::after {
content: "收起文本";
}
</style>
</head>
<body>
<div class="box">
<input type="checkbox" name="toggle" id="toggle" style="display: none;">
<p class="text">我我我我我我小心点的点点滴滴创建的觉得讲讲点击点击觉得就就点击点击大家就姐姐到家觉得讲讲解放军对讲机基督教家具家电姐姐到家安静司法局啊诶接发阿胶二姐我我我我我我小心点的点点滴滴创建的觉得讲讲点击点击觉得就就点击点击大家就姐姐到家觉得讲讲解放军对讲机基督教家具家电姐姐到家安静司法局啊诶接发阿胶二姐</p>
<label for="toggle" onclick="clickHandle"></label>
</div>
<script type="text/javascript">
// window.onload = function() {
// let list = document.querySelectorAll("p");
// list.forEach(item => {
// item.classList[item.scrollHeight > item.offsetHeight ? "add" : "remove"]("truncated");
// });
// }
</script>
</body>
</html>