文字溢出實(shí)現(xiàn)溢出的部分再放入一個(gè)新生成的div中具體代碼
更新時(shí)間:2013年05月17日 17:21:56 作者:
說文字溢出,如何實(shí)現(xiàn)溢出的文字放入一個(gè)新生成的div中,原理就是判斷是否能在div里放下,如果不能,則在應(yīng)該斷開的地方,差入到新的div中
看到群里有人提了一個(gè)問題,說文字溢出,如何實(shí)現(xiàn)溢出的文字放入一個(gè)新生成的div中,
想了一下原理,就是判斷是否能在div里放下,如果不能,則在應(yīng)該斷開的地方,差入到新的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>文字自動(dòng)分插不同的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 = "這里是一段話,這短話的文字可以很隨意的哦,只要達(dá)到一定數(shù)量,就自動(dòng)會(huì)分頁,你信不信?不信也得信啊,這是真的,哪怕再長(zhǎng)的文字,我復(fù)制一段話吧,下面這一段話就是復(fù)制過來的,我要準(zhǔn)備復(fù)制了哦,準(zhǔn)備好了沒呢?這里是一段話,這短話的文字可以很隨意的哦,只要達(dá)到一定數(shù)量,就自動(dòng)會(huì)分頁,你信不信?不信也得信啊,這是真的,哪怕再長(zhǎng)的文字,我復(fù)制一段話吧,下面這一段話就是復(fù)制過來的,我要準(zhǔn)備復(fù)制了哦,準(zhǔn)備好了沒呢?";
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>
補(bǔ)充一下,可能出現(xiàn)的問題1、符號(hào)在下一個(gè)div第一個(gè)出現(xiàn)2、字母如"student"會(huì)被斷開寫,及其他問題,需用正則判斷一下。
想了一下原理,就是判斷是否能在div里放下,如果不能,則在應(yīng)該斷開的地方,差入到新的div中,代碼如下:
復(fù)制代碼 代碼如下:
<!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>文字自動(dòng)分插不同的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 = "這里是一段話,這短話的文字可以很隨意的哦,只要達(dá)到一定數(shù)量,就自動(dòng)會(huì)分頁,你信不信?不信也得信啊,這是真的,哪怕再長(zhǎng)的文字,我復(fù)制一段話吧,下面這一段話就是復(fù)制過來的,我要準(zhǔn)備復(fù)制了哦,準(zhǔn)備好了沒呢?這里是一段話,這短話的文字可以很隨意的哦,只要達(dá)到一定數(shù)量,就自動(dòng)會(huì)分頁,你信不信?不信也得信啊,這是真的,哪怕再長(zhǎng)的文字,我復(fù)制一段話吧,下面這一段話就是復(fù)制過來的,我要準(zhǔn)備復(fù)制了哦,準(zhǔn)備好了沒呢?";
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>
補(bǔ)充一下,可能出現(xiàn)的問題1、符號(hào)在下一個(gè)div第一個(gè)出現(xiàn)2、字母如"student"會(huì)被斷開寫,及其他問題,需用正則判斷一下。
相關(guān)文章
JavaScript實(shí)現(xiàn)手寫promise的示例代碼
promise?作為前端開發(fā)中常用的函數(shù),解決了?js?處理異步時(shí)回調(diào)地獄的問題,大家應(yīng)該也不陌生了,今天來學(xué)習(xí)一下?promise?的實(shí)現(xiàn)過程吧2023-04-04js中innerText/textContent和innerHTML與target和currentTarget的區(qū)別
今天小編就為大家分享一篇關(guān)于js中innerText/textContent和innerHTML與target和currentTarget的區(qū)別,小編覺得內(nèi)容挺不錯(cuò)的,現(xiàn)在分享給大家,具有很好的參考價(jià)值,需要的朋友一起跟隨小編來看看吧2019-01-01JavaScript HTML DOM元素 節(jié)點(diǎn)操作匯總
這篇文章主要介紹了JavaScript HTML DOM元素 節(jié)點(diǎn)操作匯總,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-07-07分享javascript計(jì)算時(shí)間差的示例代碼
這篇文章主要為大家介紹了javascript計(jì)算時(shí)間差的示例代碼,,一般來說都是計(jì)算當(dāng)前時(shí)間和一個(gè)指定時(shí)間點(diǎn)之間的差距,感興趣的小伙伴們可以參考一下2016-01-01實(shí)現(xiàn)抖音兩個(gè)旋轉(zhuǎn)小球的loading技巧實(shí)例
這篇文章主要為大家介紹了實(shí)現(xiàn)抖音兩個(gè)旋轉(zhuǎn)小球的loading技巧實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-05-05