1
2
3
4
5
6

.single-line {
  width: 100%;           /* 必须有明确宽度，ellipsis 才生效 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

1
2
3
4
5
6

.multi-line {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

1
2
3
4
5

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

/* 方案1：::after 伪元素（最常用）*/
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

/* 方案2：display: flow-root（现代简洁）*/
.parent { display: flow-root; }

/* 方案3：overflow: hidden（需注意裁剪问题）*/
.parent { overflow: hidden; }

1
2
3
4
5
6

.hover-scale {
  transition: transform 0.2s;
}
.hover-scale:hover {
  transform: scale(1.05);
}

1
2
3

input[type="checkbox"] {
  accent-color: #3498db;
}