css样式：单行与多行文本溢出显示省略号

目录

• 前言
• 单行文本溢出显示省略号
• 多行文本溢出显示省略号
• Tips
• 关注我，不迷路

前言

在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

1. 溢出显示省略号在移动端完全兼容，可以放心使用。
2. 多行文本溢出显示省略号代码中使用了-webkit-，就明白ie就不支持了，如果需要兼容ie，可以配合js去实现。

---

关注我，不迷路

小伙伴，用你可爱的小手，点个赞吧！！！

如果任何疑问的可以在评论区留言或者私聊。

也可以扫下面二维码加我wx，备注‘地区-名字-技术类型’，我会拉进我的微信技术分享群。注意：必须备注清楚哈。

也可以加QQ群交流：568984539，加群备注‘地区-名字-技术类型’。

更多前端、uniapp、nodejs等相关知识可关注我个人博客：https://blog.csdn.net/qq_42961150?spm=1011.2124.3001.5343