純css實現的擷取字串後面新增省略號程式碼例項
通常情況下擷取字串使用後臺語言或者javascript,當然本人頁推薦使用上述方式,因為更加準確靈活。
不過使用純css也可以實現擷取字串,多餘的用省略號替代的效果。
程式碼如下:
[HTML] 純文字檢視 複製程式碼<!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>
上面的程式碼成功實現了擷取字串的功能,使用如下程式碼即可:
[CSS] 純文字檢視 複製程式碼text-overflow:ellipsis; white-space:nowrap; overflow:hidden;
相關文章
- css實現的字串擷取程式碼例項CSS字串
- CSS擷取字串後面帶省略號CSS字串
- css3實現的擷取字串省略號替代CSSS3字串
- javascript擷取指定長度字串後面加點程式碼例項JavaScript字串
- 純css實現的擷取字串功能CSS字串
- substr()擷取前5個字元後面省略號的方法字元
- 純css實現的tab選項卡程式碼例項CSS
- 擷取指定長度字串長度程式碼例項字串
- javascript擷取字串程式碼例項JavaScript字串
- js擷取字串程式碼例項JS字串
- jQuery 擷取字串以省略號替代jQuery字串
- 純CSS實現的二級下拉選單效果程式碼例項CSS
- js實現的擷取指定長度字串程式碼JS字串
- jQuery實現的擷取指定長度字串程式碼jQuery字串
- 純css實現點選連結無效程式碼例項CSS
- 純css tab選項卡程式碼例項CSS
- 純CSS實現的二級導航選單效果程式碼例項CSS
- css實現梯形程式碼例項CSS
- 讓超出的文字以省略號顯示程式碼例項
- 擷取字串並補充省略號的兩種方法字串
- 使用js實現儲存讀取js字串程式碼例項JS字串
- css實現對聯程式碼例項CSS
- javascript擷取指定位數的小數程式碼例項JavaScript
- css在每一行的結尾新增逗號程式碼例項CSS
- css實現矩形切角效果程式碼例項CSS
- 【前端芝士樹】純CSS實現多行文字溢位顯示省略號前端CSS
- css3實現的checkbox核取方塊美化程式碼例項CSSS3
- css3實現的折角效果程式碼例項CSSS3
- css實現的首字母下沉程式碼例項CSS
- css實現的div垂直居中效果程式碼例項CSS
- CSS實現的柱狀圖效果例項程式碼CSS
- js實現的字串簡單編碼和解碼程式碼例項JS字串
- 純 CSS 自定義多行省略:從原理到實現CSS
- css實現的彎彎的月亮效果程式碼例項CSS
- css實現圖片灰度效果程式碼例項CSS
- css實現半透明邊框程式碼例項CSS
- css3實現tab選項卡程式碼例項CSSS3
- js實現的輸出雙引號程式碼例項JS