文字溢出实现溢出的部分再放入一个新生成的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 相关文章推荐
使用IE的地址栏来辅助调试Web页脚本
Mar 08 Javascript
浅谈JavaScript的事件
Feb 27 Javascript
jQuery Uploadify 上传插件出现Http Error 302 错误的解决办法
Dec 12 Javascript
JCrop+ajaxUpload 图像切割上传的实例代码
Jul 20 Javascript
详解如何给React-Router添加路由页面切换时的过渡动画
Apr 25 Javascript
Vue CLI3中使用compass normalize的方法
May 30 Javascript
javascript中this的用法实践分析
Jul 29 Javascript
layui使用表格渲染获取行数据的例子
Sep 13 Javascript
vue路由守卫,限制前端页面访问权限的例子
Nov 11 Javascript
jquery 插件重新绑定的处理方法分析
Nov 23 jQuery
vue动画—通过钩子函数实现半场动画操作
Aug 09 Javascript
JavaScript实现点击图片换背景
Nov 20 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操作xml入门之cdata区段
2015/01/23 PHP
php以fastCGI的方式运行时文件系统权限问题及解决方法
2015/05/11 PHP
使用ltrace工具跟踪PHP库函数调用的方法
2016/04/25 PHP
PHP+Ajax实现上传文件进度条动态显示进度功能
2018/06/04 PHP
js 操作select和option常用代码整理
2012/12/13 Javascript
javascript特殊用法示例介绍
2013/11/29 Javascript
Nodejs实现批量下载妹纸图
2015/05/28 NodeJs
JavaScript实现表格快速变色效果代码
2015/08/19 Javascript
javascript中异常处理案例(推荐)
2016/10/03 Javascript
纯js实现动态时间显示
2020/09/07 Javascript
jqueryUI tab标签页代码分享
2017/10/09 jQuery
js+SVG实现动态时钟效果
2018/07/14 Javascript
vue.js中toast用法及使用toast弹框的实例代码
2018/08/27 Javascript
element ui 表格动态列显示空白bug 修复方法
2018/09/04 Javascript
ios设备中angularjs无法改变页面title的解决方法
2018/09/13 Javascript
在Vue项目中使用jsencrypt.js对数据进行加密传输的方法
2019/04/17 Javascript
JS数组方法concat()用法实例分析
2020/01/18 Javascript
JavaScript实现简单贪吃蛇效果
2020/03/09 Javascript
[02:22]《新闻直播间》2017年08月14日
2017/08/15 DOTA
[51:00]Secret vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
Python连接mssql数据库编码问题解决方法
2015/01/01 Python
记一次python 内存泄漏问题及解决过程
2018/11/29 Python
对python多线程中Lock()与RLock()锁详解
2019/01/11 Python
OpenCV 边缘检测
2019/07/10 Python
Python中IP地址处理IPy模块的方法
2019/08/16 Python
浅谈Python中re.match()和re.search()的使用及区别
2020/04/14 Python
Python中如何引入第三方模块
2020/05/27 Python
目前不被任何主流浏览器支持的CSS3属性汇总
2014/07/21 HTML / CSS
世界上最全面的汽车零部件和配件集合:JC Whitney
2016/09/04 全球购物
基本款天堂:Everlane
2017/05/13 全球购物
美国性感内衣店:Yandy
2018/06/12 全球购物
在职证明书范本(2014新版)
2014/09/25 职场文书
2014幼儿教师个人工作总结
2014/12/03 职场文书
2015年学校保卫部工作总结
2015/05/11 职场文书
大学开学典礼新闻稿
2015/07/17 职场文书
spring cloud gateway中如何读取请求参数
2021/07/15 Java/Android