文字溢出實(shí)現(xiàn)溢出的部分再放入一個(gè)新生成的div中具體代碼

2024-05-06 15:47:47

字體：大中小

供稿：網(wǎng)友

說(shuō)文字溢出，如何實(shí)現(xiàn)溢出的文字放入一個(gè)新生成的div中，原理就是判斷是否能在div里放下，如果不能，則在應(yīng)該斷開的地方，差入到新的div中

看到群里有人提了一個(gè)問(wèn)題，說(shuō)文字溢出，如何實(shí)現(xiàn)溢出的文字放入一個(gè)新生成的div中，

想了一下原理，就是判斷是否能在div里放下，如果不能，則在應(yīng)該斷開的地方，差入到新的div中，代碼如下：

復(fù)制代碼代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>文字自動(dòng)分插不同的div-Jason Yu</title>
<style type="text/css">
*{margin:0;padding:0;}
body{line-height:24px;font-family:SimSun;font-size:12px;color:#000;}
#box1{height:96px;}
.box{width:200px;overflow:hidden;margin-top:10px;border:1px solid #000;}
</style>
</head>
<body>
<div></div>
<script type="text/javascript">
var str = "這里是一段話,這短話的文字可以很隨意的哦，只要達(dá)到一定數(shù)量，就自動(dòng)會(huì)分頁(yè)，你信不信？不信也得信啊，這是真的，哪怕再長(zhǎng)的文字，我復(fù)制一段話吧，下面這一段話就是復(fù)制過(guò)來(lái)的，我要準(zhǔn)備復(fù)制了哦，準(zhǔn)備好了沒呢？這里是一段話,這短話的文字可以很隨意的哦，只要達(dá)到一定數(shù)量，就自動(dòng)會(huì)分頁(yè)，你信不信？不信也得信啊，這是真的，哪怕再長(zhǎng)的文字，我復(fù)制一段話吧，下面這一段話就是復(fù)制過(guò)來(lái)的，我要準(zhǔn)備復(fù)制了哦，準(zhǔn)備好了沒呢？";
var oBox1 = document.getElementById("box1");
function fnTextOver(n1){
var newBox2 = document.createElement("div");
document.body.appendChild(newBox2);
newBox2.className = "box";
for(var i=n1; i<=str.length; i++){
newBox2.innerHTML = str.substring(n1,i);
if(newBox2.offsetHeight<=98){
if(i==str.length){
newBox2.style.height = "96px";
}
}else{
newBox2.innerHTML = str.substring(n1,i-1);
newBox2.style.height = "96px";
arguments.callee(i-1);
break;
}
}
}

function fnShowText(){
var newBox = document.createElement("div");
document.body.appendChild(newBox);
newBox.className = "box";
for(var i=1; i<=str.length; i++){
newBox.innerHTML = str.substring(0,i);
if(newBox.offsetHeight<=98){
oBox1.innerHTML = str.substring(0,i);
if(i==str.length){
document.body.removeChild(newBox);
}
}else{
document.body.removeChild(newBox);
fnTextOver(i-1);
break;
}
}
}
fnShowText();
</script>
</body>
</html>