css overflow hidden / beyond hidden (supplement CSS style penetrating scoped problem)

1. Single-line text - overflow hidden/too long hidden/exceeded hidden

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

2. Multi-line text - overflow hidden/too long hidden/over hidden

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

3. Single-line text in the table - overflow hidden/too long hidden/exceeded hidden

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

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

Replenish:

1. Set text spacing

.div {
    letter-spacing: 1.5em;
 }

2. uniapp (clear the default style that comes with the button) 
 

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

3. When we use packaged elment-ui components , such as: el-的样式but modifying css does not work (penetration)

1. Use  >>> symbols: the applicable style syntax of this method: css, stylus

2. Use  symbols: the applicable style syntax of this method: sass, scss, less /deep/ 

3. Use symbols: This method is common to all style grammars, that is, applicable to css, stylus, sass, scss, less ::v-deep 

Among them, /deep/ and ::v-deep belong to the depth selector . After using the above-mentioned depth selector, add the CSS style behind it to take effect

3. Filter: You can adjust the length of the string /number according to your needs, and adjust the interception length in the filter. As shown below:

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