<!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>文字展开收起</title>
<style>
p {
width: 400px;
margin: 150px auto;
background-color: rgb(243, 223, 184);
border: 10px solid #ccc;
}
span {
font-size: 20px;
}
</style>
</head>
<body>
<p>
<span>
</span>
<a href="#"></a>
</p>
<script>
var p = document.getElementsByTagName('p')[0];
var span = p.getElementsByTagName('span')[0];
var a = p.getElementsByTagName('a')[0];
var str = "夜渐渐深了,我喜欢这样的夜晚,它沉寂了白天一切的喧嚣,厚重而真实的存在。白天与黑夜,简单的分明.可以,点燃一支烟,听一段轻音乐,思绪随那些袅袅的烟雾,许多事情就这样流过像静静流淌的小河"
span.innerText = str;
var str1 = ">>收起"
a.innerText = str1;
var target = true;
a.onclick = function () {
if (target) {
span.innerText = str.slice(0, 18);
this.innerTextL = '>>展开';
} else {
span.innerText = str;
this.innerText = '>>收起';
}
target = !target;
}
</script>
</body>
</html>