純css實現的截取字元串後面添加省略號代碼實例:通常情況下截取字元串使用後臺語言或者javascript,當然本人頁推薦使用上述方式,因為更加準確靈活。不過使用純css也可以實現截取字元串,多餘的用省略號替代的效果。代碼如下:螞蟻部落 螞蟻部落歡迎您,只有努力奮鬥才會有美好的未來。 沒有人一開始.....
純css實現的截取字元串後面添加省略號代碼實例:
通常情況下截取字元串使用後臺語言或者javascript,當然本人頁推薦使用上述方式,因為更加準確靈活。
不過使用純css也可以實現截取字元串,多餘的用省略號替代的效果。
代碼如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> #box li{ line-height:28px; width:330px; text-align:center; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; } </style> </head> <body> <ul id="box"> <li>螞蟻部落歡迎您,只有努力奮鬥才會有美好的未來。</li> <li>沒有人一開始就是高手,所以要虛心學習。</li> <li>每一天都是新的,請好好珍惜當前的事件。</li> <li>分享的胸懷和互助的精神是進步的最大源動力。</li> </ul> </body> </html>
上面的代碼成功實現了截取字元串的功能,使用如下代碼即可:
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=14505
更多內容可以參閱:http://www.softwhy.com/divcss/