# 文本省略号显示
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样式可点击链接了解