常用的css代码

---

1.文本溢出…

单行文本的溢出显示省略号

.text-space{
   width:200px;
   overflow: hidden;
   text-overflow:ellipsis;
   white-space: nowrap;
}

多行文本溢出显示省略号

.text-space{
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
}

注意：

1. -webkit-line-clamp： 用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合 其他的WebKit属性。常见结合属性：
2. display: -webkit-box： 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
3. -webkit-box-orient： 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。

2.css如何设置滚动条样式

webkit下面的CSS设置滚动条

/* 设置滚动条的样式 */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

/* 滚动槽 */
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
  border-radius: 10px;
}

/**滚动条背景颜色*/
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.4);
  -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
}

::-webkit-scrollbar-thumb:window-inactive {
	background: rgba(255, 0, 0, 0.3);
}

//影藏滚动条
.class::-webkit-scrollbar {
  display: none;
}

2.图片上下居中

.img-box {
	display: table-cell;
	vertical-align: middle;
	width: 52px;
	height: 52px;
	img{
		width:100%;
	}
}