文字溢出实现溢出的部分再放入一个新生成的div中具体代码


Posted in Javascript onMay 17, 2013

看到群里有人提了一个问题,说文字溢出,如何实现溢出的文字放入一个新生成的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"会被断开写,及其他问题,需用正则判断一下。
Javascript 相关文章推荐
Ext javascript建立超链接,进行事件处理的实现方法
Mar 22 Javascript
jquery URL参数判断,确定菜单样式
May 31 Javascript
JavaScript类和继承 this属性使用说明
Sep 03 Javascript
解决自定义$(id)的方法与jquery选择器$冲突的问题
Jun 14 Javascript
JS实现的仿淘宝交易倒计时效果
Nov 27 Javascript
jquery实现点击其他区域时隐藏下拉div和遮罩层的方法
Dec 23 Javascript
url传递的参数值中包含&amp;时,url自动截断问题的解决方法
Aug 02 Javascript
Centos6.8下Node.js安装教程
May 12 Javascript
node.js调用C++函数的方法示例
Sep 21 Javascript
详解Axios 如何取消已发送的请求
Oct 20 Javascript
详解JS ES6编码规范
May 07 Javascript
javascript拖曳互换div的位置实现示例
Jun 28 Javascript
JQuery DataTable删除行后的页面更新利用Ajax解决
May 17 #Javascript
extjs ColumnChart设置不同的颜色实现代码
May 17 #Javascript
JQuery设置和去除disabled属性的5种方法总结
May 16 #Javascript
javascript检测页面是否缩放的小例子
May 16 #Javascript
js获取键盘按键响应事件(兼容各浏览器)
May 16 #Javascript
js如何获取file控件的完整路径具体实现代码
May 15 #Javascript
Jquery+CSS3实现一款简洁大气带滑动效果的弹出层
May 15 #Javascript
You might like
PHP制作用户注册系统
2015/10/23 PHP
php实现处理输入转义字符的代码
2015/11/08 PHP
PHP获取文件扩展名的常用方法小结【五种方式】
2018/04/27 PHP
JS 容错处理代码, 屏蔽错误信息
2021/03/09 Javascript
解读JavaScript代码 var ie = !-[1,] 最短的IE判定代码
2011/05/28 Javascript
从阶乘函数对比Javascript和C#的异同
2012/05/31 Javascript
使用firebug进行调试javascript的示例
2013/12/16 Javascript
javascript实现链接单选效果的方法
2015/05/13 Javascript
搞定immutable.js详细说明
2016/05/02 Javascript
利用jquery给指定的table动态添加一行、删除一行的方法
2016/10/12 Javascript
使用vue-router设置每个页面的title方法
2018/02/11 Javascript
使用proxy实现一个更优雅的vue【推荐】
2018/06/19 Javascript
微信小程序项目实践之九宫格实现及item跳转功能
2018/07/19 Javascript
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
2019/10/25 Javascript
学习python 之编写简单乘法运算题
2016/02/27 Python
PyQt5每天必学之单行文本框
2018/04/19 Python
python+POP3实现批量下载邮件附件
2018/06/19 Python
Python实现动态添加属性和方法操作示例
2018/07/25 Python
详解Python静态网页爬取获取高清壁纸
2019/04/23 Python
python+selenium实现自动化百度搜索关键词
2019/06/03 Python
python批量修改图片尺寸,并保存指定路径的实现方法
2019/07/04 Python
python pip源配置,pip配置文件存放位置的方法
2019/07/12 Python
python调用百度API实现人脸识别
2020/11/17 Python
Python LMDB库的使用示例
2021/02/14 Python
html5 实现客户端验证上传文件的大小(简单实例)
2016/05/15 HTML / CSS
学生会主席就职演讲稿
2014/01/14 职场文书
电脑销售顾问自荐信
2014/01/29 职场文书
投资合作协议书
2014/04/17 职场文书
村级换届选举方案
2014/05/10 职场文书
关于奉献的演讲稿
2014/05/21 职场文书
保密工作整改情况汇报
2014/11/06 职场文书
会计稽核岗位职责
2015/04/13 职场文书
离婚案件被告代理词
2015/05/23 职场文书
2016春季校长开学典礼致辞
2015/11/26 职场文书
vue 给数组添加新对象并赋值
2022/04/20 Vue.js
SQL Server 忘记密码以及重新添加新账号
2022/04/26 SQL Server