2- 常用css样式的使用

主要记录一些项目开发中比较常用的css效果： CSS 文本不换行或者设置估计行，超出范围隐藏，并显示省略号、自定义设置浏览器自带滚动条的样式

1. CSS 文本不换行，超出范围隐藏，并显示省略号

<div class="text-nowrap">
  CSS 文本不换行，超出范围隐藏，并显示省略号
</div>

<style>
  .text-nowrap {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
</style>

2. css多行文本超出长度显示省略号，多行文本超出长度显示省略号

<div class="text-ellipsis">
  css多行文本超出长度显示省略号，多行文本超出长度显示省略号
</div>

<style>
  .text-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }
</style>

3. 设置浏览器自带滚动条的样式

• ::-webkit-scrollbar——整个滚动条。
• ::-webkit-scrollbar-button——滚动条上的按钮（上下箭头）。
• ::-webkit-scrollbar-thumb——滚动条上的滚动滑块。
• ::-webkit-scrollbar-track——滚动条轨道。
• ::-webkit-scrollbar-track-piece——滚动条没有滑块的轨道部分。
• ::-webkit-scrollbar-corner——当同时有垂直滚动条和水平滚动条时交汇的部分。通常是浏览器窗口的右下角。
• ::-webkit-resizer——出现在某些元素底角的可拖动调整大小的滑块。

<div class="scrollbar">
  设置浏览器自带滚动条的样式
  <div class="scrollbarDiv" style="height: 600px">
    用来撑开高度的div
  </div>
</div>

<style>
.scrollbar {
  overflow-y: auto;
  height: calc(100vh - 500px);
}

//整个滚动条
.scrollbar::-webkit-scrollbar {
  width: 6px;
}
//滚动条轨道
.scrollbar::-webkit-scrollbar-track {
  background-color: #fff;
  border-radius: 10px;
}
//滚动条上的滚动滑块
.scrollbar::-webkit-scrollbar-thumb {
  background-color: #c1c1c1;
  border-radius: 20px;
}
</style>