文字溢出实现溢出的部分再放入一个新生成的div中具体代码
更新时间：2013年05月17日 17:21:56 作者：
说文字溢出，如何实现溢出的文字放入一个新生成的div中，原理就是判断是否能在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" 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"会被断开写，及其他问题，需用正则判断一下。
想了一下原理，就是判断是否能在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"会被断开写，及其他问题，需用正则判断一下。
相关文章
promise 作为前端开发中常用的函数，解决了 js 处理异步时回调地狱的问题，大家应该也不陌生了，今天来学习一下 promise 的实现过程吧2023-04-04
这篇文章主要介绍了JS判断浏览器类型与操作系统的方法,结合实例形式分析了JS针对各种常见浏览器与操作系统进行判断的方法,需要的朋友可以参考下2020-04-04
这篇文章主要为大家介绍了js的深拷贝，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-11-11
js中innerText/textContent和innerHTML与target和currentTarget的区别
今天小编就为大家分享一篇关于js中innerText/textContent和innerHTML与target和currentTarget的区别，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2019-01-01
这篇文章主要介绍了JavaScript HTML DOM元素 节点操作汇总,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-07-07
在网上搜索了一些用javascript写的日历类都不太令人满意，主要是用了之后还要写很多客户端代码，有空之余，自己动手写了一个。主要是推广自己写的js pr库。2010-12-12
这篇文章主要帮助大家理解JavaScript中worker事件api，对worker事件api有一个深刻了解，感兴趣的小伙伴们可以参考一下2015-12-12
这篇文章主要介绍了JS 中在严格模式下this的指向问题，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-09-09
这篇文章主要为大家介绍了javascript计算时间差的示例代码，，一般来说都是计算当前时间和一个指定时间点之间的差距，感兴趣的小伙伴们可以参考一下2016-01-01
这篇文章主要为大家介绍了实现抖音两个旋转小球的loading技巧实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
最新评论