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) returnreturn str.slice(0, 10) + new Array(3).fill('*').join('*') + str.slice(str.length - 4, str.length)},}