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