css超出长度用...

单行:
white-space: nowrap;// 文本内容不会自动换行。
overflow: hidden; //超过盒子宽度部分隐藏。
text-overflow: ellipsis;// 超过盒子宽度部分用省略号代替。
多行:
word-break:break-all;
display:-webkit-box;
-webkit-line-clamp:2; // 超过2行用...
-webkit-box-orient:vertical;
overflow:hidden;
.hidden_scrollbar {
  overflow-x: scroll; /* 允许水平滚动 */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer/Edge */
}

.hidden_scrollbar::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera等 */
}
修改滚动条样式
/* 修改滚动条宽度 */
::-webkit-scrollbar {
  width: 6px;
}

/* 修改滚动条轨道 */
::-webkit-scrollbar-track {
  background-color: #f1f1f1;
  border-radius: 10px;
}

/* 修改滑块 */
::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 10px;
  border: 2px solid #f1f1f1;
}

/* 鼠标悬停时的滑块样式 */
::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}
posted @ 2021-11-17 14:42  Life_countdown  阅读(587)  评论(0)    收藏  举报