Home > Developer > JavaScript
Someone raised a question in the group about text overflow and how to put the overflow text into a newly generated div,
After thinking about the principle, it is to determine whether it can be put down in the div. If not, it should be disconnected and transferred to the new div. The Code is as follows:
Copy codeThe Code is as follows:
<! 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> text is automatically inserted into different 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 = "here is a paragraph. The text in this short sentence can be very casual. As long as it reaches a certain number, it will automatically be paged. Do you believe it? Believe it or not. It's true. Even if it's a long text, let me copy it. The following is a copy. I want to copy it. Are you ready? Here is a paragraph. The text of this short sentence can be very casual. As long as it reaches a certain number, it will automatically be paged. Do you believe it or not? Believe it or not. It's true. Even if it's a long text, let me copy it. The following is a copy. I want to copy it. Are you ready? ";
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>
Note: Possible Problems 1. the first occurrence of the symbol in the next div 2. The writing of letters such as "student" will be disconnected, and other problems need to be judged by regular expressions.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
