<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#box {
width: 230px;
background-color: #ccc;
line-height: 26px;
color: white;
}
a {
text-decoration: none;
color: red;
}
</style>
<script type="text/javascript">
function show()
{
var box = document.getElementById("box");
var text = box.innerHTML; //获取box里面的内容
var newBox = document.createElement("div"); //创建div元素
var btn = document.createElement("a"); //创建div元素
newBox.innerHTML = text.substring(0,21); //substring字符串截取的开始位置
btn.innerHTML = text.length > 21 ? "...显示全部" : ""; //判断显示的字数是否大于字符串截取的字数 来设置a的显示
btn.href = "###"; //让a链接点击不跳转
btn.onclick = function(){
if(btn.innerHTML == "...显示全部")
{
btn.innerHTML = "收起";
newBox.innerHTML = text;
}
else
{
btn.innerHTML = "...显示全部";
newBox.innerHTML = text.substring(0,21);
}
}
// 设置box内容为空，div元素 a元素加入到box中
box.innerHTML = "";
box.appendChild(newBox);
box.appendChild(btn);
}
window.onload=function()
{
show();
}
</script>
</head>
<body>
<div id="box">
那片笑声让我想起我的那些花儿<br />
在我生命每个角落静静为我开着<br />
我曾以为我会永远守在他身旁 <br />
今天我们已经离去在人海茫茫
</div>
</body>
</html>
