文字溢出实现溢出的部分再放入一个新生成的div中具体代码_Javascript教程-查字典教程网
文字溢出实现溢出的部分再放入一个新生成的div中具体代码
文字溢出实现溢出的部分再放入一个新生成的div中具体代码
发布时间:2016-12-30 来源:查字典编辑
摘要:看到群里有人提了一个问题,说文字溢出,如何实现溢出的文字放入一个新生成的div中,想了一下原理,就是判断是否能在div里放下,如果不能,则在...

看到群里有人提了一个问题,说文字溢出,如何实现溢出的文字放入一个新生成的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"></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"会被断开写,及其他问题,需用正则判断一下。

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类