1、添加高亮导致位置变化

问题:hover时候添加加边框效果,会出现原来内容移动情况

可以在原来的内容上在一个 透明的边框 占位子

2、圆环的做法

圆环

圆环:使用渐变

1
2
3
4
5
6
7
li {
width: 20px;
height: 20px;
border-radius: 50%;
position: relative;
background-image: radial-gradient(#f00 0px 6px, #fff 6px 9px, #f00 9px 12px);
}

3、多行文本显示省略号

  • 单行文本显示省略号
1
2
3
4
display: block;
white-space: nowrap; /*规定文本不换行**/
overflow: hidden;
text-overflow: ellipsis; /**显示省略符号来代表被修剪的文本。*/
  • 多行文本显示省略号
1
2
3
4
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1; /** 多行文本溢出...,写2就代表第二行会显示省略号*/
overflow: hidden;