23. 文本样式

text-align —— 水平对齐

控制文本在容器中的水平对齐方式。

/* 左对齐（默认） */
.left {
    text-align: left;
}

/* 居中对齐 */
.center {
    text-align: center;
}

/* 右对齐 */
.right {
    text-align: right;
}

/* 两端对齐 */
.justify {
    text-align: justify; /* 每行宽度一致，像报纸排版 */
}

text-decoration —— 文本装饰

控制文本的下划线、删除线等装饰线。

/* 无装饰（常用于去掉链接下划线） */
.no-underline {
    text-decoration: none;
}

/* 下划线 */
.underline {
    text-decoration: underline;
}

/* 上划线（少用） */
.overline {
    text-decoration: overline;
}

/* 删除线 */
.line-through {
    text-decoration: line-through;
}

装饰线样式

/* 装饰线颜色 */
.deco-color {
    text-decoration: underline red;
}

/* 装饰线样式 */
.deco-style {
    text-decoration: underline wavy; /* wavy = 波浪线 */
    /* 可选：solid, double, dashed, dotted, wavy */
}

/* 完整简写 */
.deco-shorthand {
    text-decoration: underline wavy red 2px;
    /* line style color thickness */
}

text-transform —— 文字大小写转换

不修改原文，只改变视觉显示。

/* 全大写 */
.uppercase {
    text-transform: uppercase;
}

/* 全小写 */
.lowercase {
    text-transform: lowercase;
}

/* 首字母大写 */
.capitalize {
    text-transform: capitalize;
}

text-indent —— 首行缩进

/* 中文段落首行缩进两字符 */
.chinese-para {
    text-indent: 2em; /* 相对于自身字号的 2 倍 */
}

/* 固定缩进 */
.fixed-indent {
    text-indent: 40px;
}

letter-spacing —— 字符间距

控制字母/汉字之间的间距。

/* 增加字间距 */
.spacious {
    letter-spacing: 2px;
}

/* 减少字间距 */
.tight {
    letter-spacing: -1px;
}

/* 标题常用：稍微加大间距 */
.heading {
    letter-spacing: 0.1em;
}

word-spacing —— 单词间距

控制英文单词之间的间距。

.word-space {
    word-spacing: 5px;
}

white-space —— 空白处理

控制元素内的空白符如何显示。

/* 默认：合并空白，自动换行 */
.normal {
    white-space: normal;
}

/* 不换行，空白合并 */
.nowrap {
    white-space: nowrap;
}

/* 保留空白和换行，不自动换行 */
.pre {
    white-space: pre;
}

/* 保留空白和换行，自动换行 */
.pre-wrap {
    white-space: pre-wrap;
}

/* 合并空白，但保留换行符 */
.pre-line {
    white-space: pre-line;
}

vertical-align —— 垂直对齐

控制行内元素的垂直对齐，常用于图片和文字的对齐。

/* 图片与文字顶部对齐 */
img.top {
    vertical-align: top;
}

/* 图片与文字中部对齐 */
img.middle {
    vertical-align: middle;
}

/* 图片与文字底部对齐 */
img.bottom {
    vertical-align: bottom;
}

/* 表格单元格中 */
td {
    vertical-align: middle;
}

实战：链接悬停效果

a {
    color: #1976D2;
    text-decoration: none;
    transition: all 0.2s ease;
}

a:hover {
    color: #0D47A1;
    text-decoration: underline;
}

实战：中英文混排优化

.content {
    font-family: "Helvetica Neue", "PingFang SC", sans-serif;
    font-size: 16px;
    line-height: 1.8;
    color: #333;
    text-align: justify; /* 两端对齐 */
    text-indent: 2em;    /* 首行缩进 */
    letter-spacing: 0.5px; /* 微字距 */
    word-spacing: 1px;   /* 单词间距 */
}

实战：文字截断 + 省略号

.truncate {
    white-space: nowrap;      /* 不换行 */
    overflow: hidden;         /* 溢出隐藏 */
    text-overflow: ellipsis;  /* 显示省略号 */
    max-width: 200px;         /* 必须设宽度 */
}

文本属性速查

属性	作用	常用值
text-align	水平对齐	left, center, right, justify
text-decoration	装饰线	none, underline, line-through
text-transform	大小写转换	uppercase, lowercase, capitalize
text-indent	首行缩进	2em, 40px
letter-spacing	字符间距	2px, 0.1em
word-spacing	单词间距	5px
white-space	空白处理	normal, nowrap, pre-wrap
vertical-align	垂直对齐	top, middle, bottom

小结

• text-align 控制水平对齐，justify 实现两端对齐
• text-decoration: none 常用于去掉链接默认下划线
• text-transform 不改原文，只改变显示
• text-indent: 2em 实现中文段落缩进
• letter-spacing 调整字符间距
• white-space: nowrap + overflow: hidden + text-overflow: ellipsis 实现文字截断