常会用到的 css 样式

最新推荐文章于 2022-08-20 17:56:12 发布

原创最新推荐文章于 2022-08-20 17:56:12 发布 · 167 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

前端专栏收录该内容

17 篇文章

订阅专栏

# 文本省略号显示

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样式可点击链接了解