纯css实现的截取字符串后面添加省略号代码实例_html/css_WEB-ITnose
- WBOY원래의
- 2016-06-24 11:29:201759검색
纯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/
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.