单行文本省略:
1.设置元素宽度
2.设置元素文本内容一行显示 **white-space: nowrap;**
属性值: normal 默认值
nowrap 不能换行(可以用强制换行)
pre-wrap 显示 空格,回车,换行
pre 显示 空格,回车,不显示换行
pre-line 显示 空格,不显示回车,换行
3.设置元素溢出隐藏 overflow: hidden;
4.设置溢出文本显示** **text-overflow: ellipsis;**** ==》ellipsis:省略号
clip 默认值····剪切
ellipsis 省略号 标记
例:
width: 5em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
#### 多行文本省略
1.设置宽度
2.设置几行省略 -webkit-line-clamp 限制款元素显示的文本的··············行数
3.WebKit的CSS扩展属性,该方法适用于WebKit浏览器及移动端;**-webkit-时chrome兼容标志**
** **-webkit-line-clamp;****
**display: -webkit-box;** 必须结合的属性,将对象作为弹性伸缩盒子模型显示 。
** **-webkit-box-orient: vertical;**** 必须结合的属性,设置或检索伸缩盒对象的子元素的排列方式 。
要3个一起连用
4.overflow: hidden;
例:
width: 5em;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp:2;
display: -webkit-box;
-webkit-box-orient: vertical;