Z
ZHANK
编程在线教程CSS 教程文本转换与间距
文本与字体

文本转换与间距

uppercase/lowercase/capitalize、letter-spacing/word-spacing/line-height

文本转换与间距

text-transform 快速变换大小写,letter-spacing/line-height 控制文字间距。

学完本章你将: 掌握 text-transform、letter-spacing、word-spacing、line-height、white-space。


text-transform 大小写

css
.upper { text-transform: uppercase; }    /* 全部大写 */
.lower { text-transform: lowercase; }    /* 全部小写 */
.cap { text-transform: capitalize; }     /* 每个单词首字母大写 */
.none { text-transform: none; }          /* 不转换(默认) */

间距控制

css
.spacing {
  letter-spacing: 2px;      /* 字符间距 */
  word-spacing: 5px;        /* 单词间距 */
  line-height: 1.6;         /* 行高——推荐用倍数(不用 px) */
  text-indent: 2em;         /* 首行缩进两个字符 */
}

white-space 空白处理

css
.normal { white-space: normal; }      /* 连续空格合并,自动换行(默认) */
.nowrap { white-space: nowrap; }      /* 不换行——直到 <br> */
.pre { white-space: pre; }            /* 保留所有空格和换行 */
.pre-wrap { white-space: pre-wrap; }  /* 保留空格换行 + 自动换行 */

实用场景

css
/* 单行文字溢出变省略号 */
.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 阅读友好的行高 */
article p { line-height: 1.8; }