CSS3 文本效果完全指南
大白话讲解，编程小白也能轻松掌握的各种文本样式技巧
文本特效
text-shadow（文本阴影）
给文字添加阴影效果，让文字更有层次感，就像阳光照射物体产生的影子。
text-shadow: 水平偏移 垂直偏移 模糊半径 颜色;
/* 示例 */
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
/* 示例 */
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
我有阴影的文字效果
text-stroke（文字描边）
给文字添加描边效果，就像用彩笔描字一样，让文字更突出。
-webkit-text-stroke: 宽度 颜色; /* 兼容写法 */
/* 示例 */
-webkit-text-stroke: 2px #3498db;
/* 示例 */
-webkit-text-stroke: 2px #3498db;
我有描边的文字效果
🚩 提示：这个属性需要加浏览器前缀（如-webkit-），而且文字颜色设为透明更好看
文本溢出处理
text-overflow（文本溢出）
当文本超出容器时如何处理，通常显示省略号…
text-overflow: ellipsis; /* 用省略号*/
/* 需要配合使用 */
white-space: nowrap; /* 不换行 */
overflow: hidden; /* 溢出隐藏 */
/* 需要配合使用 */
white-space: nowrap; /* 不换行 */
overflow: hidden; /* 溢出隐藏 */
多行文本溢出
使用WebKit前缀实现的限制多行文本显示
display: -webkit-box;
-webkit-line-clamp: 3; /* 限制行数 */
-webkit-box-orient: vertical;
overflow: hidden;
-webkit-line-clamp: 3; /* 限制行数 */
-webkit-box-orient: vertical;
overflow: hidden;
文本装饰与排版
text-decoration（文本装饰）
为文本添加修饰线，如：下划线、删除线、上划线等
text-decoration-line: 线类型; /* 下划线、删除线等 */
text-decoration-color: 颜色;
text-decoration-style: 样式; /* 实线、虚线、波浪线等 */
text-decoration-thickness: 粗细;
/* 简写形式 */
text-decoration: 线类型 样式 颜色;
text-decoration-color: 颜色;
text-decoration-style: 样式; /* 实线、虚线、波浪线等 */
text-decoration-thickness: 粗细;
/* 简写形式 */
text-decoration: 线类型 样式 颜色;
波浪下划线文字
删除线文字
上划线文字
word-wrap & word-break（断词换行）
控制长单词或URL的换行方式，避免内容溢出
word-wrap: break-word; /* 允许单词内断行 */
word-break: break-all; /* 更激进的断行方式 */
overflow-wrap: anywhere; /* 新版标准推荐 */
word-break: break-all; /* 更激进的断行方式 */
overflow-wrap: anywhere; /* 新版标准推荐 */
这个超长英文单词会被断开换行：Pneumonoultramicroscopicsilicovolcanoconiosis
高级文本效果
direction 和 unicode-bidi（文本方向）
控制文本的书写方向（从左到右或从右到左）
direction: rtl; /* 从右向左 */
unicode-bidi: bidi-override;
/* 用于混合方向文本 */
unicode-bidi: bidi-override;
/* 用于混合方向文本 */
这段文字从右向左显示
text-align-last（最后一行对齐）
控制文本块中最后一行的对齐方式
text-align-last: right; /* 最后一行右对齐 */
text-align-last: center; /* 最后一行居中 */
text-align-last: justify; /* 最后一行两端对齐 */
text-align-last: center; /* 最后一行居中 */
text-align-last: justify; /* 最后一行两端对齐 */
这是一段演示文本，用于展示text-align-last属性的效果。注意最后一行如何对齐。
text-fill-color（文本填充色）
设置文本的填充颜色，可以配合渐变效果
background: linear-gradient(to right, red, purple);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
渐变填充的文字效果