文本转换与间距
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; }