实现了div中字数较多,显示不下的时候,用省略号来表示,并且可以展开和收起:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div id="hutia" style="word-wrap: break-word;
word-break: normal;width:200px;height:300px;">我爱北京*,我爱北京*,我爱北京*,我爱北京*,我爱北京*,我爱北京*,我爱北京*,我爱北京*,我爱北京*,我爱北京*,我爱北京*,我爱北京*,我爱北京*,我爱北京*,我爱北京*,我爱北京*,我爱北京*,我爱北京*,我爱北京*,
</div>
<script type="text/javascript">
var div = document.getElementById("hutia");
var str = div.innerHTML;
var span = document.createElement("span");
var open = document.createElement("a");
if (str.length>50){
div.innerHTML = str.substring(0,50);
open.innerHTML = "...展开";
open.href="#";
div.appendChild(open);
open.onclick = function(){
if(open.innerHTML == "...展开"){
open.innerHTML = "收起";
div.innerHTML = str;
div.appendChild(open);
}
else{
open.innerHTML = "...展开";
div.innerHTML = str.substring(0,50);
div.appendChild(open);
}
}
} </script> </body>
</html>