当内容区块太长,又不是只展示内容的面板,所以在展示的时候仅展示部分内容即可,根据其需要自行展开及收缩观看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
#content {
width: 200px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div id="content"></div>
<script>
let str =
"金黄色的分机号盛世嫡妃上的讲话费解的是,尽室渡横汾坚实的发挥,金黄色的分机号盛世嫡妃上的讲话费解的是,尽室渡横汾坚实的发挥,金黄色的分机号盛世嫡妃上的讲话费解的是,尽室渡横汾坚实的发挥金黄色的分机号盛世嫡妃上的讲话费解的是,尽室渡横汾坚实的发挥金黄色的分机号盛世嫡妃上的讲话费解的是,尽室渡横汾坚实的发挥金黄色的分机号盛世嫡妃上的讲话费解的是,尽室渡横汾坚实的发挥金黄色的分机号盛世嫡妃上的讲话费解的是,尽室渡横汾坚实的发挥";
let content = document.getElementById("content");
window.onload = function () {
closeClick();
};
function doClick() {
content.innerHTML = str;
let a = document.createElement("a");
a.style.color = "red";
a.innerHTML = "<<<收缩";
a.addEventListener("click", closeClick);
content.appendChild(a);
}
function closeClick() {
content.innerHTML = str.substr(0, 50) + "......";
let a = document.createElement("a");
a.style.color = "red";
a.innerHTML = ">>>展开";
a.addEventListener("click", doClick);
content.appendChild(a);
}
</script>
</body>
</html>