Div+Css實例:用CSS控制字符寬度省略號效果
你可到這裡下載, i或自行新增下面的html
<!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=gb2312" /> <title>Div+Css實例:用CSS控制字符寬度省略號效果</title> </head> <style type="text/css"> *{ margin:0; padding:0; } a{ text-decoration:none; color:#000000;} a:hover{ text-decoration:none; color:#000000;} ul{ width:300px; height:120px; margin:40px auto; padding:12px 4px 12px 24px; border:1px solid #D4D4D4; background:#F1F1F1;} li{ margin:12px 0; } li a{ display:block; width:200px; overflow:hidden;/*注意不要寫在最後了*/white-space:nowrap; -o-text-overflow:ellipsis;text-overflow:ellipsis;} /* firefox only */ li:not(p){ clear:both;} li:not(p) a{ max-width:170px; float:left;} li:not(p):after{ content: "..."; float:left; width:40px; padding-left:5px; color:#000;} </style> <body> <ul> <li><a href="http://skysea-design.blogspot.com/">一個在IE6下no-repeat依然重複背景圖片的BUG</a></li> <li><a href="http://skysea-design.blogspot.com/">Div+Css實例:用CSS制作的熱門內容排行效果</a></li> <li><a href="http://skysea-design.blogspot.com/">Div+Css:淺淡!important對CSS的重要性</a></li> <li><a href="http://skysea-design.blogspot.com/">用CSS實現中英文雙語導航菜單</a></li> </ul> </body> </html>
0 留言:
發佈留言
您使用留言則表示同意及遵守使用條款及守則。
建議: 為方便留言回覆,請不要用匿名方式 留言。