Css实现...省略号的效果 ---

Css实现…省略号的效果

---

前言

本文分为单行省略号的实现和多行省略号的实现

介绍：我们无论写练习或者写项目的时候，像用户名字过长或者文本信息过长需要用到省略号的效果，特此总结一下用法。

---

提示：以下是本篇文章正文内容，下面案例可供参考

1、单行省略号

给div加上如下样式
div{
width: 200px;
height: 20px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
效果就达到了

2、多行省略号
假设我们要把它变成三行省略
div样式
div{
width: 200px;
height: 60px;
-webkit-line-clamp:3; //固定三行省略好
display: -webkit-box; // 旧版弹性盒子
-webkit-box-orient:vertical; // 主轴垂直
overflow: hidden; // 隐藏
}
效果：