css溢出隐藏 /超出隐藏（补充CSS样式穿透 scoped 问题）

1、单行文本 - 溢出隐藏/过长隐藏/超出隐藏

div {
  overflow:hidden;        //超出的文本隐藏
  text-overflow:ellipsis; //用省略号显示
  white-space:nowrap;     //不换行
}

2、多行文本 - 溢出隐藏/过长隐藏/超出隐藏

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

3、表格中单行文本 - 溢出隐藏/过长隐藏/超出隐藏

table {
  width:100%;
  table-layout:fixed;    //只有定义了表格的布局算法为fixed,下面td的定义才能起作用
}

td {
  width:100%;
  word-break:keep-all;    // 不换行（只能在半角空格或连字符处换行）
  white-space:nowrap;     // 不换行（文字不允许换行，单行文本）
  overflow:hidden;        // 溢出隐藏 
  text-overflow:ellipsis; // 文本溢出，...省略号代替
}

补充：

一、设置文字间距

.div {
    letter-spacing: 1.5em;
 }

二、uniapp（清除button自带的默认样式） 
 

/deep/ button {
    margin: unset!important;
    padding: unset!important;
}

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

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

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

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

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

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

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