绿野仙踪 » 网页作坊 » 利用CSS截字的效果

阿喀琉斯 发表于 2007-6-12 00:15

利用CSS截字的效果

[code]/* CSS DEMO */ K9CY qx
e
* { margin: 0; padding: 0; }
{zU(|(f.@'qk9Jki a { text-decoration: none; color: #000; }$\5t I0wC@7?t
a:hover { text-decoration: none; color: #000; }G3`D`C~dq
ul {
&_'WWyeC? width: 300px;
:trl@Tin margin: 40px auto;1XRR\0Huo
padding: 12px 4px 12px 24px;(k h y;oXU? ?pA
border: 1px solid #D4D4D4;3S&tN:EnI{ c,U]Q
background: #F1F1F1;NKRNh,n0h"h/ha
}P'[M_3n$~5{,As*m
li { margin: 12px 0; }
l B%s9Zm:T"d*QM li a {
5rl4G0JAr/` display: block;
Q/aL+`*t"?S width: 200px;
m&L'om$^`X8r overflow: hidden;
^!\su]? white-space: nowrap;
2MkItUz -o-text-overflow: ellipsis;
9`|nyNWB text-overflow: ellipsis;9vgPZn da+k
}
r t#Ld6xY,F(^
x$zV+xv~Hs /* firefox only */;Qbl@!ZL^AE
li:not(p) {
&L/l;H4s Wo clear: both;c%Lw)e;Q:`
}
lW#|^b[L li:not(p) a {

r*?~V'x,R*W"k max-width: 170px;
)FT$xd
?s.f float: left; M4|GR0hU
}SuG1Uu
li:not(p):after {
"o{Xe;N(N"Mp content: "...";
h T5cL'z
Er;~ float: left;
P-URm*sGEM3l9G width: 25px;
:O9H:Nnv.YJ3UA#E padding-left: 5px;
{u k$|P\6e color: #000;
O6[M+\O4M%y hm8p }1}n%C%M^f
!sn3SP\MdTA
/* XHTML DEMO*/ n0Y(?+F5O'E(ca&t
<ul>
XVnt!BJy8u <li><a href="#">设计人员必读：影响SEO的页面制作细节</a></li>
o g?Y*AG5{ <li><a href="#">设计人员必读：影响SEO的页面制作细节</a></li>;x O5My5},N
<li><a href="#">设计人员必读：影响SEO的页面制作细节</a></li>/i2JW_0g6R
<li><a href="#">设计人员必读：影响SEO的页面制作细节</a></li>A+eRc:X:p
<li><a href="#">设计人员必读：影响SEO的页面制作细节</a></li>
m&K5ddSv <li><a href="#">设计人员必读：影响SEO的页面制作细节</a></li>
W+e-yD V{*I2qC <li><a href="#">设计人员必读：影响SEO的页面制作细节</a></li>4B~]Uk }5h/\&}4@v
</ul> 8ME4rlJ5WH4`
[/code]

查看完整版本: 利用CSS截字的效果