首页 >web前端 >css教程 >如何实现隐藏多余的字用省略号代替

如何实现隐藏多余的字用省略号代替

一个新手
一个新手原创
2017-09-20 09:28:162827浏览

在前端经常会遇到类似的效果。 比如图中的“风花雪月与古镇火山-.....”后面“....”就是一段文字显示不下的时候默认隐藏然后用…来代替。
这里写图片描述  
只需要给元素加上以下3个css属性就可以实现了。

            overflow: hidden;//多余的隐藏            
            text-overflow:ellipsis;//多出来的用省略号代替            
            white-space: nowrap;//不换行

以上是如何实现隐藏多余的字用省略号代替 的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn