加入最愛
聯絡我們
軟體設計
品牌及LOGO設計
網站設計及建製
多媒體動畫製作
關於我們
Software Development
Branding and LOGO Design
Web Design
Multimedia Presentations
About US
您現在的位置：
首頁
>
新聞中心
軟體設計
Software Development
品牌及LOGO設計
Brand and LOGO Design
網站設計及建制
Web Design
多媒體動畫制作
Multimedia
Presentations
聯絡我們
Contact US
網頁設計公司必讀的文章 ( 97 ) 純CSS文字超出省略號效果，支持IE/FF
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=utf-8" /> <title>JS test</title> <style type="text/css"> *{ margin:0; padding:0; } body{ padding:10px; font-family:Arial; } #ididid{ position:relative; width:150px; height:20px; line-height:20px; text-overflow:ellipsis; white-space:normal; *white-space:nowrap; overflow:hidden; border:1px solid #999; } #ididid span{ position:absolute; top:0; right:0; display:block; float:left; } #ididid span:after{content:"...";} </style> </head> <body> <div id="ididid">test test test test test test test test test test test test test test test test test test test test test test test <span></span></div> </body> </html>
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
那就用JS判斷
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=utf-8" /> <title>JS test</title> <style type="text/css"> *{ margin:0; padding:0; } body{ padding:10px; font-family:Arial; } #ididid{ width:150px; line-height:20px; overflow:hidden; border:1px solid #999; } </style> </head> <body> <script type="text/javascript"> function testAuto(thisId,needLeng){ var ididid = document.getElementById(thisId); var nowLeng = ididid.innerHTML.length; if(nowLeng > needLeng){ var nowWord = ididid.innerHTML.substr(0,needLeng)+'...'; ididid.innerHTML = nowWord; } } </script> <div id="ididid">12345678901234567890test test test test test test test test test test test test test test test test test test test test test test test</div> <script type="text/javascript"> testAuto('ididid',15) </script> </body> </html>
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
返回>>
首頁
|
關於我們
|
新闻中心
|
聯絡我們
|
加入最愛
Bay Stars Design 網頁設計公司 Copyright © 2005-2008 Bay Stars Design Web Design Company All risghts reserved.
HTML代碼
