div超出可滚动，自定义滚动条样式

定义一个div
.scrollbar {
  width: 100%;
  max-height: 40px; 
  overflow: auto;
  /* 隐藏滚动条 */
  /* scrollbar-width: none;  */
}


/* 整个滚动条 */
.scrollbar::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background-color: rgba(70, 166, 255, 0.1);
  border-radius: 6px;
}

/* 滚动条上的按钮（上下箭头） */
::-webkit-scrollbar-button {
  display: none;
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
  display: none;
  background-color: rgba(70, 166, 255, 0.1);
}

/*  滚动条没有滑块的轨道部分. */
::-webkit-scrollbar-track-piece {
  /* background-color: rgba(70, 166, 255, 0.1); */
}

/* 滚动条上的滚动滑块 */
::-webkit-scrollbar-thumb {
  background-color: rgba(70, 166, 255, 0.4);
  background-clip: padding-box;
  border: 2px solid transparent;
  border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.5);
}

展示 

//关于超出隐藏和省略号

.hidden{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical; 
  -webkit-line-clamp: 3;      //用于设置几行之后超出显示省略号 这里最多显示3行
}


//悬浮显示全部信息
.hidden:hover {
  -webkit-line-clamp: none;
  overflow: visible;
}