文字溢出实现溢出的部分再放入一个新生成的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浏览器兼容Firefox的JS脚本的代码
Oct 23 Javascript
javascript new一个对象的实质
Jan 07 Javascript
JQuery操作单选按钮以及复选按钮示例
Sep 23 Javascript
js仿百度贴吧验证码特效实例代码
Jan 16 Javascript
jQuery Validate验证框架经典大全
Sep 23 Javascript
jQuery实现鼠标选文字发新浪微博的方法
Apr 02 Javascript
vue.js移动端app实战1:初始配置详解
Jul 24 Javascript
使用express+multer实现node中的图片上传功能
Feb 02 Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
Sep 30 Javascript
详解Angular模板引用变量及其作用域
Nov 23 Javascript
bootstrap与pagehelper实现分页效果
Dec 29 Javascript
Vue仿微信app页面跳转动画效果
Aug 21 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
一个改进的UBB类
2006/10/09 PHP
php侧拉菜单 漂亮,可以向右或者向左展开,支持FF,IE
2009/10/15 PHP
php 数据库字段复用的基本原理与示例
2011/07/22 PHP
windows的文件系统机制引发的PHP路径爆破问题分析
2014/07/28 PHP
PHP魔术方法以及关于独立实例与相连实例的全面讲解
2016/10/18 PHP
redis查看连接数及php模拟并发创建redis连接的方法
2016/12/15 PHP
Laravel Reponse响应客户端示例详解
2020/09/03 PHP
JS创建优美的页面滑动块效果 - Glider.js
2007/09/27 Javascript
js中有关IE版本检测
2012/01/04 Javascript
关于jQuery object and DOM element
2013/04/15 Javascript
Flex通过JS获取客户端IP和计算机名的实例代码
2013/11/21 Javascript
jQuery+ajax实现鼠标单击修改内容的思路
2014/06/29 Javascript
ECMAScript6中Set/WeakSet详解
2015/06/12 Javascript
js阻止默认浏览器行为与冒泡行为的实现代码
2016/05/15 Javascript
MVVM框架下实现分页功能示例
2018/06/14 Javascript
在SSM框架下用laypage和ajax实现分页和数据交互的方法
2019/09/27 Javascript
浅谈微信小程序列表埋点曝光指南
2019/10/15 Javascript
JS数组扁平化、去重、排序操作实例详解
2020/02/24 Javascript
Python 抓取动态网页内容方案详解
2014/12/25 Python
Python实现将数据写入netCDF4中的方法示例
2018/08/30 Python
Python2 Selenium元素定位的实现(8种)
2019/02/25 Python
Python中的Socket 与 ScoketServer 通信及遇到问题解决方法
2019/04/01 Python
Python OpenCV利用笔记本摄像头实现人脸检测
2020/08/20 Python
解决pycharm中导入自己写的.py函数出错问题
2020/02/12 Python
详解python os.path.exists判断文件或文件夹是否存在
2020/11/16 Python
CSS3 3D位移translate效果实例介绍
2016/05/03 HTML / CSS
AmazeUI 列表的实现示例
2020/08/17 HTML / CSS
联想美国官方商城:Lenovo美国
2017/06/19 全球购物
在浏览器端如何得到服务器端响应的XML数据
2012/11/24 面试题
房地产项目策划书
2014/02/05 职场文书
毕业寄语大全
2014/04/09 职场文书
三潭印月的导游词
2015/02/12 职场文书
实习单位推荐信
2015/03/27 职场文书
Pandas 稀疏数据结构的实现
2021/07/25 Python
APP界面设计技巧和注意事项
2022/04/29 杂记
Python使用BeautifulSoup4修改网页内容
2022/05/20 Python