文字溢出实现溢出的部分再放入一个新生成的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 相关文章推荐
Node.js:Windows7下搭建的Node.js服务(来玩玩服务器端的javascript吧,这可不是前端js插件)
Jun 27 Javascript
DOM 中的事件处理介绍
Jan 18 Javascript
jQuery的选择器中的通配符使用介绍
Mar 20 Javascript
jquery动态添加删除一行数据示例
Jun 12 Javascript
JavaScript拖拽、碰撞、重力及弹性运动实例分析
Jan 08 Javascript
jQuery validate 验证radio实例
Mar 01 Javascript
Vue Cli与BootStrap结合实现表格分页功能
Aug 18 Javascript
JS+canvas绘制的动态机械表动画效果
Sep 12 Javascript
解决vue项目中type=”file“ change事件只执行一次的问题
May 16 Javascript
JS实现的简单tab切换功能完整示例
Jun 20 Javascript
Vue 子组件与数据传递问题及注意事项
Jul 11 Javascript
原生js实现的金山打字小游戏(实例代码详解)
Mar 16 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
获取Javscript执行函数名称的方法
2006/12/22 Javascript
正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度
2008/09/27 Javascript
JQuery 初体验(建议学习jquery)
2009/04/25 Javascript
Jquery+ajax请求data显示在GridView上(asp.net)
2010/08/27 Javascript
jquery获取特定name所有选中的checkbox,支持IE9标准模式
2013/03/18 Javascript
jQuery列表拖动排列具体实现
2013/11/04 Javascript
jQuery 获取和设置select下拉框的值实现代码
2013/11/08 Javascript
js中回调函数的学习笔记
2014/07/31 Javascript
浅谈js的setInterval事件
2014/12/05 Javascript
js使用post 方式打开新窗口
2015/02/26 Javascript
js只执行1次的函数示例
2016/07/20 Javascript
Angular4 ElementRef的应用
2018/02/26 Javascript
基于Vue中点击组件外关闭组件的实现方法
2018/03/06 Javascript
Vue SPA单页应用首屏优化实践
2018/06/28 Javascript
如何为vuex实现带参数的 getter和state.commit
2019/01/04 Javascript
详解vue中router-link标签所必备了解的属性
2019/04/15 Javascript
微信小程序绘制图片发送朋友圈
2019/07/25 Javascript
Vue+ElementUI使用vue-pdf实现预览功能
2019/11/26 Javascript
Vue左滑组件slider使用详解
2020/08/21 Javascript
Python2.x版本中cmp()方法的使用教程
2015/05/14 Python
node.js获取参数的常用方法(总结)
2017/05/29 Python
Python KMeans聚类问题分析
2018/02/23 Python
django反向解析URL和URL命名空间的方法
2018/06/05 Python
python3利用tcp实现文件夹远程传输
2018/07/28 Python
python+mysql实现学生信息查询系统
2019/02/21 Python
Windows 安装 Anaconda3+PyCharm的方法步骤
2019/06/13 Python
Django框架视图函数设计示例
2019/07/29 Python
python爬虫增加访问量的方法
2019/08/22 Python
一款利用纯css3实现的360度翻转按钮的实例教程
2014/11/05 HTML / CSS
Soft Cotton捷克:来自爱琴海棉花的浴袍
2017/02/01 全球购物
计算机个人求职信范例
2014/01/24 职场文书
党性分析材料格式
2014/12/19 职场文书
满月酒邀请函
2015/01/30 职场文书
员工拾金不昧表扬稿
2015/05/05 职场文书
小学科学课教学反思
2016/02/23 职场文书
海康机器人重磅发布全新算法开发平台VM4.2
2022/04/21 数码科技