CSS文本样式

CSS文本属性用于控制文字的外观和排版，是页面内容呈现的核心。

字体属性

字体族与大小

.text {
  font-family: "Microsoft YaHei", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;    /* 100-900 或 normal/bold */
  font-style: normal;  /* normal/italic/oblique */
}

行高与字间距

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

文本颜色

.text {
  color: #333;
  color: rgb(51, 51, 51);
  color: rgba(51, 51, 51, 0.8);
}

文本对齐

.text {
  text-align: left;      /* left/center/right/justify */
  text-align-last: auto; /* 最后一行对齐方式 */
  vertical-align: middle; /* 垂直对齐 */
}

文本装饰

.text {
  text-decoration: none;           /* 去除下划线 */
  text-decoration: underline;      /* 下划线 */
  text-decoration: line-through;   /* 删除线 */
  text-decoration: overline;       /* 上划线 */
}

/* 组合写法 */
.text {
  text-decoration: underline wavy red;
}

文本缩进与换行

.text {
  text-indent: 2em;          /* 首行缩进 */
  white-space: nowrap;       /* 不换行 */
  white-space: pre-wrap;     /* 保留空白并换行 */
  word-break: break-all;      /* 允许单词内换行 */
  overflow-wrap: break-word;  /* 长单词换行 */
}

文本溢出处理

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;  /* 显示省略号 */
}

/* 多行省略 */
.multi-ellipsis {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

注意：text-overflow: ellipsis 需配合 white-space: nowrap 和 overflow: hidden 使用。

要点总结

• font-family 建议指定多个备选字体
• line-height 无单位时表示字体大小的倍数
• 单行省略需三属性配合：white-space + overflow + text-overflow
• text-decoration 可去除链接默认下划线

存放路径：articles/CSS/入门/CSS样式属性/CSS文本样式.md