两种方法实现超出省略号效果

woaicss woaicss woaicsswoaicsswoaicsswoaicss

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2  <html xmlns="http://www.w3.org/1999/xhtml">
 3  <head>
 4  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>JS test</title>
 6 <style type="text/css">
 7 *{
 8 margin:0;
 9 padding:0;
10 }
11 body{
12 padding:10px;
13 font-family:Arial;
14 }
15 #ididid{
16 position:relative;
17 width:150px;
18 height:20px;
19 line-height:20px;
20 text-overflow:ellipsis;
21 white-space:normal;
22 *white-space:nowrap;
23 overflow:hidden;
24 border:1px solid #999;
25 }
26 #ididid span{
27 position:absolute;
28 top:0;
29 right:0;
30 display:block;
31 float:left;
32 }
33 #ididid span:after{content:"...";}
34 </style>
35 </head>
36 <body>
37 <div id="ididid">woaicss woaicss woaicsswoaicsswoaicsswoaicss<span></span></div>
38 </body>
39 </html>

posted on 2010-04-09 16:20 Dufe王彬阅读(201) 评论(0) 编辑收藏举报