css单行/多行文本溢出隐藏 /超出隐藏，效果展示...

1、单行文本 - 溢出隐藏

div {
  width: 100px; （固定宽度）
  overflow:hidden;        //超出的文本隐藏
  text-overflow:ellipsis; //用省略号显示
  white-space:nowrap;     //不换行（文字不允许换行，单行文本）
}

实现效果：                 

一起来看流星雨...

优点： 简单，兼容多浏览器。
缺点： 由于使用white-space:nowrap 使强制不换行，所以只适合的单行。

2、多行文本 - 溢出隐藏

div {
  overflow:hidden;              //超出盒子宽度内容，便溢出隐藏  
  text-overflow:ellipsis;       //用...省略号显示
  display:-webkit-box;          //将对象作为弹性伸缩盒子模型显示
  -webkit-box-orient:vertical;  //从上到下垂直排列子元素
  -webkit-line-clamp:2;         //显示的行数
}

如果文本为一段很长的英文或者数字，则需要添加word-wrap: break-word属性

实现效果：                  

一起来看流星雨

一起来看流星雨...

优点： 可以实现限制多行, 代码量不多。
缺点： 只适用于WebKit内核的浏览器。所以大部分移动端浏览器都支持，google，Safari 浏览器只要不是版本过低都支持。IE，火狐浏览器不支持这个方法。 

补充CSS不常用属性以及穿透scoped的使用情况：

一、当我们使用封装好的elment-ui组件，如：el-的样式时，但是修改css却不起作用（穿透）

1、使用 >>> 符号：该方法适用的样式语法：css、stylus

2、使用  /deep/ 符号：该方法适用的样式语法：sass、scss、less

3、使用 ::v-deep 符号：该方法对所有样式语法通用，即适用于css、stylus、sass、scss、less

其中 /deep/ 和 ::v-deep属于深度选择器、使用上述的深度选择器之后，在后面带上CSS样式即可生效，如下图：

<style scoped lang="scss">
// elment-ui的 下拉多选框样式
::v-deep .el-tag.el-tag--info {
  background-color: #139ff7;
  border-color: #fc5531;
  color: #ffffff;
}
</style>

 二、不常用的CSS3

letter-spacing: 1.5em; // 设置文字间距


text-decoration: underline; // 设置文字下划线

三、过滤器：可根据需求调整字符串/数字的长度，调整过滤器中的截取长度。如下图：

filters: {
 
  toString(str) {
     if (!str) return
     return str.slice(0, 10) + new Array(3).fill('*').join('*') + str.slice(str.length - 4, 
     str.length)
  },
 
}