Rumah > hujung hadapan web > html tutorial > 纯css实现的截取字符串后面添加省略号代码实例_html/css_WEB-ITnose

纯css实现的截取字符串后面添加省略号代码实例_html/css_WEB-ITnose

WBOY
Lepaskan: 2016-06-24 11:29:20
asal
1819 orang telah melayarinya

纯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>
Salin selepas log masuk

上面的代码成功实现了截取字符串的功能,使用如下代码即可:

text-overflow:ellipsis;white-space:nowrap; overflow:hidden;
Salin selepas log masuk

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=14505

更多内容可以参阅:http://www.softwhy.com/divcss/

 

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan