css 文本制作

文本样式基础设置

使用 font-family 定义字体类型，如 Arial, sans-serif。font-size 控制字号（如 16px 或 1rem），color 设置文本颜色（如 #333 或 rgb(51, 51, 51)）。

.text {
  font-family: 'Helvetica Neue', sans-serif;
  font-size: 18px;
  color: #2c3e50;
}

文本对齐与间距

text-align 控制对齐方式（left/center/right/justify）。line-height 调整行高（如 1.5 倍行距），letter-spacing 设置字符间距（如 1px）。

.text {
  text-align: center;
  line-height: 1.6;
  letter-spacing: 0.5px;
}

文本装饰与效果

text-decoration 添加下划线（underline）或删除线（line-through）。text-shadow 创建阴影效果，参数依次为水平偏移、垂直偏移、模糊半径和颜色。

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

响应式文本处理

通过媒体查询调整不同屏幕尺寸下的文本样式。例如，在小屏幕上减小字号或调整行高。

@media (max-width: 768px) {
  .text {
    font-size: 14px;
    line-height: 1.4;
  }
}

高级排版控制

white-space 处理空白符（如 nowrap 防止换行），text-overflow 搭配 overflow: hidden 实现省略号效果。

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