Firefox7.0 began to be compatible with text-overflow: ellipsis; in this way, the ellipsis in the future can be compatible with the browser. The code snippet is:
| The code is as follows: |
Copy code |
Width: 200px;/* set the width */
White-space: nowrap;/* set to ignore rows */
Text-overflow: ellipsis;/* This is the ellipsis */
-O-text-overflow: ellipsis;/* compatible with opera */
Overflow: hidden;/* Hide when the value exceeds the upper limit */ |
Example 1.
| The code is as follows: |
Copy code |
<! 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 = utf-8"/>
<Title> JS test </title>
<Style type = "text/css">
*{
Margin: 0;
Padding: 0;
}
Body {
Padding: 10px;
Font-family: Arial;
}
# Ididid {
Position: relative;
Width: 150px;
Height: 20px;
Line-height: 20px;
Text-overflow: ellipsis;
White-space: normal;
* White-space: nowrap;
Overflow: hidden;
Border: 1px solid #999;
}
# Ididid span {
Position: absolute;
Top: 0;
Right: 0;
Display: block;
Float: left;
}
# Ididid span: after {content :"...";}
</Style>
</Head>
<Body>
<Div id = "ididid"> woaicss woaicsswoaicsswoaicsswoaicss <span> </div>
</Body>
</Html> |
Example 2
| The code is as follows: |
Copy code |
<! 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 = utf-8"/>
<Title> JS test </title>
<Style type = "text/css">
*{
Margin: 0;
Padding: 0;
}
Body {
Padding: 10px;
Font-family: Arial;
}
# Ididid {
Width: 150px;
Line-height: 20px;
Overflow: hidden;
Border: 1px solid #999;
}
</Style>
</Head>
<Body>
<Script type = "text/javascript">
Function testAuto (thisId, needLeng ){
Var ididid = document. getElementById (thisId );
Var nowLeng = ididid. innerHTML. length;
If (nowLeng> needLeng ){
Var nowWord = ididid. innerHTML. substr (0, needLeng) + '...';
Ididid. innerHTML = nowWord;
}
}
</Script>
<Div id = "ididid"> 2323232 woaicsswoaicsswoaicsswoaicss </div>
<Script type = "text/javascript">
TestAuto ('didid', 15)
</Script>
</Body>
</Html> |
