文本溢出

.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

多行文本省略

.text-ellipsis-more {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /* 限制在一个块元素显示的文本的行数 */
  -webkit-box-orient: vertical;
}

渐变字体

.gradient-text {
  /* 背景渐变（可自定义方向、颜色） */
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  /* 文字裁剪：只显示背景在文字区域的部分 */
  -webkit-background-clip: text;
  background-clip: text;
  /* 文字填充透明，让背景渐变透出 */
  color: transparent;
  /* 可选：增强兼容性（部分浏览器需前缀） */
  -webkit-text-fill-color: transparent;
}