纯CSS超过宽度显示省略号

最新推荐文章于 2024-10-10 11:03:16 发布

纯和书院

最新推荐文章于 2024-10-10 11:03:16 发布

阅读量93

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/shanzimedia/article/details/54783745

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏


   
   
    
    
     
     <!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>纯CSS超过宽度显示省略号</title> 
    
    
    
    
     
         <style type="text/css"> 
    
    
    
    
     
            *{ margin:0; padding:0; font-size:12px; font-family:"新宋体";} 
    
    
    
    
     
             ol{ background:url(http://www.hemin.cn/blog/wp-content/uploads/2009/06/list.jpg) no-repeat left -2px;} 
    
    
    
    
     
             li{position:relative; padding:0 60px 0 20px; height:20px; overflow:hidden; line-height:20px; width:250px; 
    
    
    
    
     
                list-style:none;}
    
    
    
    
     
             li a{ position:relative;background: url(http://www.hemin.cn/blog/wp-content/uploads/2009/10/pot.gif) no-repeat
    
    
    
    
     
                   230px top;display:inline-block; text-decoration:none; color:#000; padding-right:12px; margin-right:10px;} 
    
    
    
    
     
             li a:hover{ text-decoration:underline;} 
    
    
    
    
     
             li a em{width:10px; height:18px; overflow:hidden;background:#FFF; position:absolute;right:0; bottom:0; 
    
    
    
    
     
                  text-indent:-999px;} li span{ position:absolute; padding-left:5px; color:#CCC;} 
    
    
    
    
     
         </style> 
    
    
    
    
     
       </head> 
    
    
    
    
     
     <body> 
    
    
    
    
     
       <ol> 
    
    
    
    
     
         <li><a href="#">练演员<em>...</em></a><span> 2009-6-21</span></li> 
    
    
    
    
     
         <li><a href="#">练演员的训演员<em>...</em></a><span> 2009-6-21</span></li>  
    
    
    
    
     
         <li><a href="#">杂技团美女演员的训练<em>...</em></a><span> 2009-6-21</span></li> 
    
    
    
    
     
         <li><a href="#">杂技团美女演员的训练演员的训练演员的训练训练演员的训练演员的训练训练演员的训练演员的训练训演员的训练演员的训练< em>...</em></a><span>2009-6-21</span></li> 
    
    
    
    
     
         <li><a href="#">杂技团美女演员的训练演员的训练演员的训练训练演员的训练演员的训练训练演员的训练演员的训练练演员的训练演员的训练技团美女演员的训练演员技团美女演员的训练演员< em>...</em></a><span>2009-6-21</span></li> 
    
    
    
    
     
       </ol> 
    
    
    
    
     
     </body> 
    
    
    
    
     
     </html>