css 文本制作

基础文本样式设置

使用 font-family 定义字体，font-size 调整字号，color 设置文字颜色。例如：

.text-example {
  font-family: 'Arial', sans-serif;
  font-size: 16px;
  color: #333333;
}

文本装饰与转换

通过 text-decoration 添加下划线/删除线，text-transform 控制大小写转换：

.decorated-text {
  text-decoration: underline;
  text-transform: uppercase;
}

文字间距调整

letter-spacing 调整字符间距，line-height 设置行高：

.spaced-text {
  letter-spacing: 2px;
  line-height: 1.6;
}

文本阴影效果

使用 text-shadow 创建阴影，参数依次为水平偏移、垂直偏移、模糊度、颜色：

.shadow-text {
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

文字对齐方式

text-align 控制对齐方向，text-indent 设置首行缩进：

.aligned-text {
  text-align: center;
  text-indent: 2em;
}

高级文字效果

结合 background-clip 和 -webkit-text-fill-color 实现渐变文字：

.gradient-text {
  background: linear-gradient(to right, #ff8a00, #e52e71);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

响应式文字处理

使用 vw 单位或 clamp() 实现自适应字号：

.responsive-text {
  font-size: clamp(14px, 4vw, 24px);
}

多行文本省略

对多行文本使用省略号显示：

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