使用Css隐藏超出容器宽度的文字，溢出部分用“...”表示

哎，今天才知道用Css就可以弄出字数太长时“截取”字数的效果，以前还傻乎乎的在后台，或是用js截取。- -！

 

代码 
 1 <html>
 2    <head>
 3       <title></title>
 4       <style type="text/css">
 5           #newsList{ font-size:14px;}
 6           #newsList ul,#newsList ul li{ list-style:none}
 7           #newsList ul{width:380px;}
 8           #newsList ul li{ width:300px; margin-bottom:5px; height:16px;}
 9           #newsList ul li span{display:block; float:right;}
10           #newsList ul li a {
11               text-decoration:none; 
12               display:block; 
13               float:left; 
14               width:175px; 
15               overflow:hidden;          /*超出部分隐藏*/
16               white-space:nowrap;
17               /*文本溢出用"..."表示*/
18               text-overflow:ellipsis;                    /*适用IE*/
19               -o-text-overflow:ellipsis;                 /*适用opera*/
20               -moz-binding: url('ellipsis.xml#ellipsis');/*适用火狐(firefox通过XUL实现效果)*/
21           }
22      </style>
23   </head>
24   <body>
25      <div id="newsList">
26          <ul>
27              <li><a href="#" >使用Css隐藏超出容器宽度的文字</a><span>[2010-12-01]</span></li>
28              <li><a href="#">使用Css隐藏超出容器宽度的文字</a><span>[2010-12-01]</span></li>
29              <li><a href="#">使用Css隐藏超出容器宽度的文字</a><span>[2010-12-01]</span></li>
30          </ul>
31      </div>
32  </body>
33  </html>

 

 


最先时是看到别人用after伪类(a:after{content:"..."})使火狐浏览器产生如此效果.但缺点很明显,不管内容部分是否有溢出,都会在后面加上"...".
只能继续找咯,终于看到了好办法,通过XUL实现.新建一个xml,取名为ellipsis,然后在文件内写入如下节点并保存. 

 

代码 
 1 <?xml version="1.0"?>
 2  <bindings
 3   xmlns="http://www.mozilla.org/xbl"
 4   xmlns:xbl="http://www.mozilla.org/xbl"
 5   xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
 6  >
 7  <binding id="ellipsis">
 8         <content>
 9             <xul:window>
10                 <xul:description crop="end" xbl:inherits="value=xbl:text">
11                     <children/>
12                 </xul:description>
13             </xul:window>
14         </content>
15     </binding>
16  </bindings>

 

最后在样式上加上-moz-binding: url('ellipsis.xml#ellipsis');就成了!

posted on 2010-12-01 22:44  LiemKell  阅读(11523)  评论(0)  编辑  收藏  举报

导航