目录
前言
在css中经常会遇到需要显示一行文字,但文字过多显示不完,就需要用到单行文本溢出显示省略号。
在css中经常会遇到需要显示多行文字,但文字过多显示不完,就需要用到多行文本溢出显示省略号。
单行文本溢出显示省略号
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
设置了该属性,只会显示一行文本,溢出 的文本就显示 省略号。
显示效果:
多行文本溢出显示省略号
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
3表示的最多显示3行文字, 溢出 的文本就显示 省略号。
显示效果:
Tips
- 溢出显示省略号在移动端完全兼容,可以放心使用。
- 多行文本溢出显示省略号代码中使用了-webkit-,就明白ie就不支持了,如果需要兼容ie,可以配合js去实现。
关注我,不迷路
小伙伴,用你可爱的小手,点个赞吧!!!
如果任何疑问的可以在评论区留言或者私聊。
也可以扫下面二维码加我wx,备注‘地区-名字-技术类型’,我会拉进我的微信技术分享群。注意:必须备注清楚哈。
也可以加QQ群交流:568984539,加群备注‘地区-名字-技术类型’。
更多前端、uniapp、nodejs等相关知识可关注我个人博客:https://blog.csdn.net/qq_42961150?spm=1011.2124.3001.5343