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样式即可生效,如下图:

 二、不常用的CSS3


letter-spacing: 1.5em; // 设置文字间距


text-decoration: underline; // 设置文字下划线

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

css单行/多行文本溢出隐藏 /超出隐藏,效果展示..._第1张图片

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

你可能感兴趣的:(CSS,html,css,html5)