星空网 > 软件开发 > 网页设计

纯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/

 




原标题:纯css实现的截取字符串后面添加省略号代码实例

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

chipmunkgift:https://www.goluckyvip.com/tag/17034.html
Chipper Cas:https://www.goluckyvip.com/tag/17035.html
Chipper Cash:https://www.goluckyvip.com/tag/17036.html
chitea:https://www.goluckyvip.com/tag/17037.html
Chloe:https://www.goluckyvip.com/tag/17038.html
Choco Up:https://www.goluckyvip.com/tag/17039.html
2023年二手服装市场报告:全球销售额达1970亿美元:https://www.kjdsnews.com/a/1836308.html
海南琼海市有什么旅游景点 琼海市的旅游景点:https://www.vstour.cn/a/362187.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流