文字溢出实现溢出的部分再放入一个新生成的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 相关文章推荐
利用jQuery接受和处理xml数据的代码(.net)
Mar 28 Javascript
js实现网页自动刷新可制作节日倒计时效果
May 27 Javascript
jQuery实现在textarea指定位置插入字符或表情的方法
Mar 11 Javascript
举例详解Python中smtplib模块处理电子邮件的使用
Jun 24 Javascript
微信小程序 使用picker封装省市区三级联动实例代码
Oct 28 Javascript
微信小程序 封装http请求实例详解
Jan 16 Javascript
JS中的phototype详解
Feb 04 Javascript
vue的基本用法与常见指令
Aug 15 Javascript
基于Vue框架vux组件库实现上拉刷新功能
Nov 28 Javascript
layui 给数据表格加序号的方法
Aug 20 Javascript
详解为什么Vue中的v-if和v-for不建议一起用
Jan 13 Vue.js
基于JavaScript实现年月日三级联动
Jun 22 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
印尼林东PWN黄金曼特宁咖啡豆:怎么冲世界上最醇厚的咖啡冲煮教程
2021/03/03 冲泡冲煮
PHP中路径问题的解决方案
2006/10/09 PHP
比较详细PHP生成静态页面教程
2012/01/10 PHP
php.ini-dist 和 php.ini-recommended 的区别介绍(方便开发与安全的朋友)
2012/07/01 PHP
ThinkPHP控制器间实现相互调用的方法
2014/10/31 PHP
PHP答题类应用接口实例
2015/02/09 PHP
php获取从百度、谷歌等搜索引擎进入网站关键词的方法
2015/07/08 PHP
JS版网站风格切换实例代码
2008/10/06 Javascript
jQuery EasyUI API 中文文档 - Draggable 可拖拽
2011/09/29 Javascript
文本框输入时 实现自动提示(像百度、google一样)
2012/04/05 Javascript
JavaScript中this关键词的使用技巧、工作原理以及注意事项
2014/05/20 Javascript
jquery mobile页面跳转后样式丢失js失效的解决方法
2014/09/06 Javascript
简单谈谈javascript代码复用模式
2015/01/28 Javascript
js实现支持手机滑动切换的轮播图片效果实例
2015/04/29 Javascript
jquery实现带缩略图的全屏图片画廊效果实例
2015/06/25 Javascript
select2 ajax 设置默认值,初始值的方法
2018/08/09 Javascript
Vue表情输入组件 微信face表情组件
2019/02/11 Javascript
纯js+css实现在线时钟
2020/08/18 Javascript
javascript实现放大镜功能
2020/12/09 Javascript
[51:05]DOTA2上海特级锦标赛主赛事日 - 5 败者组决赛Liquid VS EG第一局
2016/03/06 DOTA
python列表操作实例
2015/01/14 Python
详解利用OpenCV提取图像中的矩形区域(PPT屏幕等)
2019/07/01 Python
详解python实现数据归一化处理的方式:(0,1)标准化
2019/07/17 Python
python标识符命名规范原理解析
2020/01/10 Python
css3 按钮 利用css3实现超酷下载按钮
2013/03/18 HTML / CSS
css3给背景图片加颜色遮罩的方法
2019/11/05 HTML / CSS
Burt’s Bees英国官网:世界领先的天然个人护理品牌
2020/08/17 全球购物
初中女生自我鉴定
2013/12/19 职场文书
专升本个人自我评价
2013/12/22 职场文书
文明美德伴我成长演讲稿
2014/05/12 职场文书
群众路线对照检查剖析材料
2014/10/09 职场文书
避暑山庄导游词
2015/02/04 职场文书
CSS预处理框架——Stylus
2021/04/21 HTML / CSS
详解CSS开发过程中的20个快速提升技巧
2021/05/21 HTML / CSS
常用的Python代码调试工具总结
2021/06/23 Python
Java使用JMeter进行高并发测试
2021/11/23 Java/Android