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的使用情况：
一、设置文字间距
.div {letter-spacing: 1.5em;}二、设置文字下划线
text-decoration: underline;
三、当我们使用封装好的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>四、过滤器：可根据需求调整字符串/数字的长度，调整过滤器中的截取长度。如下图：
filters: {toString(str) {if (!str) returnreturn str.slice(0, 10) + new Array(3).fill('*').join('*') + str.slice(str.length - 4, str.length)},}
