常会用到的 css 样式

# 文本省略号显示

div { 
  white-space:nowrap;/* 规定文本是否折行 */ 
  overflow: hidden;/* 规定超出内容宽度的元素隐藏 */ 
  text-overflow: ellipsis; /* 规定超出的内容文本省略号显示，通常跟上面的属性连用，因为没有上面的属性不会触发超出规定的内容 */ 
}

折行(能主动控制行数,这里设置的超出 4 行显示省略号)：

div { 
  overflow: hidden; 
  text-overflow: ellipsis; 
  display: -webkit-box; /* 将对象作为弹性伸缩盒子模型显示 */ 
  -webkit-line-clamp: 4; /* 控制最多显示几行 */ 
  -webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */ 
}

# 改变滚动条样式

div::-webkit-scrollbar { 
  /* 这里的宽是指竖向滚动条的宽，高是指横向滚动条的高*/ 
  width: 16px; 
  height: 16px; 
  background: pink; 
} 

div::-webkit-scrollbar-thumb { 
  border-radius: 10px; 
  background: linear-gradient(red,orange); 
}

# 设置文本俩端对齐

div {
  text-align-last:justify; /* 这是关键属性 */
}

# 渐变

div {
  background: linear-gradient(to right, #9795f0, #fbc8d4); /* 标准的语法（必须放在最后） */
}

部分内容转载自：https://juejin.im/post/5d6a740fe51d45621512adb3

• 文本省略号显示
• 折行显示
• 改变滚动条样式
• 设置文本两端对齐
• 更多css样式可点击链接了解