文字溢出，实现溢出的文字再放入一个新生成的div中

最新推荐文章于 2023-01-18 11:35:52 发布

weixin_30920091

最新推荐文章于 2023-01-18 11:35:52 发布

阅读量346

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/kendyjack/archive/2013/05/17/3083559.html

本文介绍了一种将过长文本自动分页显示在不同div中的算法，并提供了具体实现代码。该算法通过判断文本是否能在当前div中完全显示来决定是否进行分页。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

看到群里有人提了一个问题，说文字溢出，如何实现溢出的文字放入一个新生成的div中，

想了一下原理，就是判断是否能在div里放下，如果不能，则在应该断开的地方，差入到新的div中，代码如下：

<!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>文字自动分插不同的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 id="box1" class="box"></div>
<script type="text/javascript">
var str = "这里是一段话,这短话的文字可以很随意的哦，只要达到一定数量，就自动会分页，你信不信？不信也得信啊，这是真的，哪怕再长的文字，我复制一段话吧，下面这一段话就是复制过来的，我要准备复制了哦，准备好了没呢？这里是一段话,这短话的文字可以很随意的哦，只要达到一定数量，就自动会分页，你信不信？不信也得信啊，这是真的，哪怕再长的文字，我复制一段话吧，下面这一段话就是复制过来的，我要准备复制了哦，准备好了没呢？";
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>

补充一下，可能出现的问题
1、符号在下一个div第一个出现
2、字母如"student"会被断开写，及其他问题，需用正则判断一下。

转载请注明出处，谢谢！

转载于:https://www.cnblogs.com/kendyjack/archive/2013/05/17/3083559.html