欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-04-11 14:20:26
...

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

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

以上就是如何实现隐藏多余的字用省略号代替 的详细内容,更多请关注其它相关文章!