哎，今天才知道用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>[-12-01]</span></li>
28 <li><a href="#">使用Css隐藏超出容器宽度的文字</a><span>[-12-01]</span></li>
29 <li><a href="#">使用Css隐藏超出容器宽度的文字</a><span>[-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="/xbl"
4 xmlns:xbl="/xbl"
5 xmlns:xul="/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');就成了!
