常用的CSS代码片段

最新推荐文章于 2023-10-23 14:48:08 发布

视力

最新推荐文章于 2023-10-23 14:48:08 发布

阅读量130

点赞数

分类专栏：工具文章标签： css

本文链接：https://blog.csdn.net/pentakillwusha/article/details/125014202

版权

工具专栏收录该内容

10 篇文章 0 订阅

订阅专栏

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

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

多行文本溢出显示省略号

p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

设置滚动条样式

.test::-webkit-scrollbar {
  width: 10px;
  height: 1px;
}
.test::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: skyblue;
  background-image: -webkit-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.2) 75%,
    transparent 75%,
    transparent
  );
}
.test::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #ededed;
  border-radius: 10px;
}