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

看到群里有人提了一个问题，说文字溢出，如何实现溢出的文字放入一个新生成的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"会被断开写，及其他问题，需用正则判断一下。

赞 (0)

相关推荐

  • 小技巧处理div内容溢出

    前几天遇到一个问题,代码是这样一个层次: 复制代码 代码如下: <div class="province">    <ul>        <li>1</li>        <li>2</li>        <li>3</li>    </ul></div> 我设置了div的边框, 要想ul的内容在边框内, 必须设置div高度. 但是,ul内的内容是变化的,内容少

  • div中文字内容溢出常见的解决方法

    由于文字内容的长度不确定性和页面布局的固定性,常常会遇到文字溢出的状况,有一下解决方法: 1:规定文字父容器的宽高,设置超出隐藏:overflo:"hidde" -------缺点是会经常遇到最后一行文字显示不全的情况,建议在只控制一行文字显示的时候使用 2:css+div防止文字溢出,超出部分变成省略号,折行显示,white-space:nowrap;word-break:break-all: text-overflow:ellipsis; -o-text-overflow:elli

  • jQuery实现控制文字内容溢出用省略号(…)表示的方法

    本文实例讲述了jQuery实现控制文字内容溢出用省略号(-)表示的方法.分享给大家供大家参考,具体如下: jQuery限制字符字数的方法 $(function(){ //限制字符个数 $(".text").each(function(){ var maxwidth=23; if($(this).text().length>maxwidth){ $(this).text($(this).text().substring(0,maxwidth)); $(this).html($(th

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

    看到群里有人提了一个问题,说文字溢出,如何实现溢出的文字放入一个新生成的div中, 想了一下原理,就是判断是否能在div里放下,如果不能,则在应该断开的地方,差入到新的div中,代码如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> &

  • python读取csv文件并把文件放入一个list中的实例讲解

    如下所示: #coding=utf8 ''' 读取CSV文件,把csv文件放在一份list中. ''' import csv class readCSV(object): def __init__(self,path="Demo.csv"): #创建一个属性用来保存要操作CSV的文件 self.path=path try: #打开一个csv文件,并赋予读的权限 self.csvHand=open(self.path,"r") #调用csv的reader函数读取csv

  • Oracle将查询的结果放入一张自定义表中并再查询数据

    如下的实际例子代码可以将查询的结果放入到一张自定义表中,同时可以再从这个自定义的表中查询数据: with AA as (SELECT TICKETNUMBER, TICKETTYPE, VERSIONNUMBER, STAGENAME, DTANALYZED, GISPROCESSID, PROCESSSTATUS, DTRECEIVED, USERID, USERNAME, FIRSTNAME, LASTNAME, NUMBEROFDAYS FROM REPORT_PERFORMANCEOFA

  • java正则表达式实现提取需要的字符并放入数组【ArrayList数组去重复功能】

    本文实例讲述了java正则表达式实现提取需要的字符并放入数组.分享给大家供大家参考,具体如下: 这里演示Java正则表达式提取需要的字符并放入数组,即ArrayList数组去重复功能. 具体代码如下: package com.test.tool; import java.util.ArrayList; import java.util.HashSet; import java.util.regex.*; public class MatchTest { public static void ma

  • python 把文件中的每一行以数组的元素放入数组中的方法

    有时候需要把文件中的数据放入到数组中,这里提供了一种方法,可以根据文件结尾的标记进行数据拆分,然后再把拆分的文件放入数组中 # -*-coding: utf-8 -*- f = open("username.txt","w") f.write("Lycoridiata\n") f.write("wulei\n") f.write("leilei\n") f.write("Xingyu\n"

  • jsp实现将信息放入xml中的方法

    本文实例讲述了jsp实现将信息放入xml中的方法.分享给大家供大家参考,具体如下: 一.jsp代码: 省: <select id="province" name="province" onchange="jsSubmit()"> <option value="北京" selected="selected">北京</option> <option value=&quo

  • JS基于递归算法实现1,2,3,4,5,6,7,8,9倒序放入数组中的方法

    JS基于递归算法实现1,2,3,4,5,6,7,8,9倒序放入数组中的方法

    本文实例讲述了JS基于递归算法实现1,2,3,4,5,6,7,8,9倒序放入数组中的方法.分享给大家供大家参考,具体如下: var array = [1, 2, 3, 4, 5, 6, 7, 8, 9]; function reverseDump(start) { start++; if (start > array.length / 2) { return; } var temp = array[start]; array[start] = array[array.length - start

  • php将session放入memcached的设置方法

    可以修改php.ini文件的情况下: 1.修改php.ini中的 复制代码 代码如下: session.save_hander = memcache;session.save_path = "tcp://host:端口号";//例如:session.save_path = "tcp://127.0.0.1:11211"; 2.正常存取session的值就OK了. 不可以修改php.ini文件的情况下: a.动态修改php.ini中的设置. 复制代码 代码如下: in

  • 将DLL放入到资源中,运行时自动加载的小例子

    将DLL放入到资源中,运行时自动加载的小例子

    今天在看到 一个小软件,考勤用的 AttendanceSheet_V_1_2,只有一个EXE文件,绿色的随便考到哪里都可以运行. 顺手反编译后发现,他将需要的DLL也放入到资源文件了,在启动的时候自动加载: 代码如下: 复制代码 代码如下: internal static class Program{    // Methods    [STAThread]    private static void Main()    {        Application.EnableVisualSty

  • Java基础将Bean属性值放入Map中的实例

    Java基础将Bean属性值放入Map中的实例 利用发射将Java对象的属性值以属性名称为键,存储到Map中的简单实现.包括自身属性及从父类继承得到的属性.Java类型的getField[s]方法只能获取public 类型的属性,getDeclaredFields则能获取所有声明的属性,同时,如果类的可见性非公有,则Field的get(Object)方法将取不到具体的属性值. package com.wood.util; import java.lang.reflect.Field; impor

随机推荐