文本属性

> CSS3 对文本属性进行了显著的增强，引入了许多新的文本效果和处理方式。这些新属性使得我们能够创建更加丰富和美观的文本效果，同时更好地控制文本的显示和溢出处理。

文本阴影

text-shadow 属性

text-shadow 属性用于为文本添加阴影效果，可以创建立体的文字效果。

基本语法

text-shadow: h-shadow v-shadow blur-radius color;

参数说明

• h-shadow：水平阴影位置（必需）
• v-shadow：垂直阴影位置（必需）
• blur-radius：模糊半径（可选）
• color：阴影颜色（可选）

基本用法

/* 简单文本阴影 */
.shadow-text {
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

/* 多重文本阴影 */
.multi-shadow {
  text-shadow:
    1px 1px 2px rgba(0,0,0,0.2),
    2px 2px 4px rgba(0,0,0,0.1);
}

/* 发光效果 */
.glow-text {
  text-shadow:
    0 0 10px rgba(255,255,255,0.8),
    0 0 20px rgba(255,255,255,0.6),
    0 0 30px rgba(255,255,255,0.4);
}

实际应用

/* 标题阴影 */
h1 {
  text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}

/* 3D 文字效果 */
.three-d {
  color: #fff;
  text-shadow:
    0 1px 0 #ccc,
    0 2px 0 #c9c9c9,
    0 3px 0 #bbb,
    0 4px 0 #b9b9b9,
    0 5px 0 #aaa,
    0 6px 1px rgba(0,0,0,.1),
    0 0 5px rgba(0,0,0,.1),
    0 1px 3px rgba(0,0,0,.3),
    0 3px 5px rgba(0,0,0,.2),
    0 5px 10px rgba(0,0,0,.25),
    0 10px 10px rgba(0,0,0,.2),
    0 20px 20px rgba(0,0,0,.15);
}

/* 霓虹灯效果 */
.neon {
  color: #fff;
  text-shadow:
    0 0 5px #fff,
    0 0 10px #fff,
    0 0 20px #ff00de,
    0 0 30px #ff00de,
    0 0 40px #ff00de;
}

文本溢出处理

text-overflow 属性

text-overflow 属性用于控制文本溢出容器时的显示方式。

基本语法

text-overflow: clip | ellipsis | string;

参数说明

• clip：裁剪文本（默认）
• ellipsis：显示省略号
• string：显示自定义字符串

基本用法

/* 裁剪文本 */
.clip-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

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

/* 自定义字符串 */
.custom-string {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: "...";
}

实际应用

/* 标题省略号 */
.title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 300px;
}

/* 文本截断 */
.text-truncate {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 多行省略号 */
.multiline-ellipsis {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

单词换行

word-wrap 属性

word-wrap 属性用于控制长单词是否可以换行。

基本语法

word-wrap: normal | break-word;

参数说明

• normal：只在允许的换行点换行（默认）
• break-word：在单词内部换行

基本用法

/* 正常换行 */
.normal-wrap {
  word-wrap: normal;
}

/* 强制换行 */
.break-word {
  word-wrap: break-word;
}

实际应用

/* 代码块 */
.code-block {
  word-wrap: break-word;
  overflow-x: auto;
  background: #f8f9fa;
  padding: 15px;
  border-radius: 4px;
}

/* URL 处理 */
.url-text {
  word-wrap: break-word;
  word-break: break-all;
}

单词断行

word-break 属性

word-break 属性用于控制单词的断行方式。

基本语法

word-break: normal | break-all | keep-all | break-word;

参数说明

• normal：使用默认的断行规则（默认）
• break-all：允许在单词内部断行
• keep-all：尽量在单词之间断行
• break-word：在单词内部断行（仅在必要时）

基本用法

/* 正常断行 */
.normal-break {
  word-break: normal;
}

/* 所有位置断行 */
.break-all {
  word-break: break-all;
}

/* 保持单词完整 */
.keep-all {
  word-break: keep-all;
}

实际应用

/* 长单词处理 */
.long-word {
  word-break: break-all;
  overflow-wrap: break-word;
}

/* 中文文本 */
.chinese-text {
  word-break: keep-all;
}

/* 混合文本 */
.mixed-text {
  word-break: break-word;
}

空白处理

white-space 属性

white-space 属性用于控制元素内空白的处理方式。

基本语法

white-space: normal | nowrap | pre | pre-wrap | pre-line;

参数说明

• normal：合并空白，允许换行（默认）
• nowrap：合并空白，不允换行
• pre：保留空白，不允换行
• pre-wrap：保留空白，允换行
• pre-line：合并空白，允换行

基本用法

/* 正常空白处理 */
.normal-space {
  white-space: normal;
}

/* 不换行 */
.no-wrap {
  white-space: nowrap;
}

/* 保留空白 */
.preserve-space {
  white-space: pre;
}

/* 保留空白并换行 */
.pre-wrap {
  white-space: pre-wrap;
}

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

实际应用

/* 代码块 */
.code {
  white-space: pre;
  background: #f8f9fa;
  padding: 15px;
  border-radius: 4px;
  overflow-x: auto;
}

/* 单行文本 */
.single-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 地址文本 */
.address {
  white-space: pre-line;
}

文本方向

direction 属性

direction 属性用于设置文本的书写方向。

基本语法

direction: ltr | rtl;

参数说明

• ltr：从左到右（默认）
• rtl：从右到左

基本用法

/* 从左到右 */
.ltr-text {
  direction: ltr;
}

/* 从右到左 */
.rtl-text {
  direction: rtl;
}

实际应用

/* 阿拉伯语文本 */
.arabic-text {
  direction: rtl;
  text-align: right;
}

/* 希伯来语文本 */
.hebrew-text {
  direction: rtl;
  text-align: right;
}

/* 混合文本 */
.mixed-text {
  direction: ltr;
}

双向文本

unicode-bidi 属性

unicode-bidi 属性用于控制文本的双向覆盖。

基本语法

unicode-bidi: normal | embed | isolate | bidi-override | isolate-override | plaintext;

参数说明

• normal：不使用双向覆盖（默认）
• embed：嵌入双向文本
• isolate：隔离双向文本
• bidi-override：覆盖双向文本
• isolate-override：隔离并覆盖双向文本
• plaintext：纯文本模式

基本用法

/* 正常双向处理 */
.normal-bidi {
  unicode-bidi: normal;
}

/* 嵌入双向文本 */
.embed-bidi {
  unicode-bidi: embed;
}

/* 隔离双向文本 */
.isolate-bidi {
  unicode-bidi: isolate;
}

实际应用案例

1. 卡片标题

.card-title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

2. 导航链接

.nav-link {
  display: inline-block;
  padding: 10px 15px;
  color: #333;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}

.nav-link:hover {
  color: #007bff;
  text-shadow: 0 0 5px rgba(0,123,255,0.3);
}

3. 用户评论

.comment {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 15px;
}

.comment-author {
  font-weight: bold;
  color: #333;
  text-shadow: 1px 1px 0 rgba(255,255,255,1);
}

.comment-text {
  color: #555;
  line-height: 1.6;
  word-wrap: break-word;
}

4. 代码显示

.code-display {
  background: #2d2d2d;
  color: #f8f8f2;
  padding: 20px;
  border-radius: 8px;
  font-family: 'Courier New', monospace;
  white-space: pre;
  overflow-x: auto;
  word-wrap: break-word;
}

.code-display::selection {
  background: #007bff;
  color: white;
}

5. 产品描述

.product-description {
  line-height: 1.6;
  color: #555;
}

.product-description h2 {
  font-size: 20px;
  color: #333;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

.product-description p {
  margin-bottom: 15px;
  word-wrap: break-word;
}

.product-description .short-text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

浏览器兼容性

CSS3 文本属性在所有现代浏览器中都有良好的支持：

• text-shadow：Chrome 4+, Firefox 3.5+, Safari 4+, IE 10+
• text-overflow：Chrome 1+, Firefox 7+, Safari 3.1+, IE 6+
• word-wrap：Chrome 1+, Firefox 3.5+, Safari 3.1+, IE 5.5+
• word-break：Chrome 1+, Firefox 15+, Safari 3.1+, IE 5.5+
• white-space：Chrome 1+, Firefox 1+, Safari 1+, IE 5.5+

最佳实践

1. 合理使用文本阴影

/* 推荐 - 适度的文本阴影 */
.title {
  text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}

/* 不推荐 - 过度的文本阴影 */
.title {
  text-shadow:
    1px 1px 0 #fff,
    2px 2px 0 #fff,
    3px 3px 0 #fff,
    4px 4px 0 #fff;
}

2. 处理文本溢出

/* 推荐 - 优雅的溢出处理 */
.text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 不推荐 - 简单裁剪 */
.text {
  white-space: nowrap;
  overflow: hidden;
}

3. 控制单词换行

/* 推荐 - 合理的单词换行 */
.text {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* 不推荐 - 强制所有位置换行 */
.text {
  word-break: break-all;
}

4. 考虑可访问性

/* 推荐 - 考虑可访问性 */
.text {
  line-height: 1.6;
  color: #333;
}

/* 不推荐 - 不利于可访问性 */
.text {
  text-shadow: 2px 2px 2px rgba(0,0,0,0.8);
  color: #fff;
}

总结

CSS3 文本属性提供了强大的文本控制能力：

主要属性：

• text-shadow：文本阴影效果
• text-overflow：文本溢出处理
• word-wrap：单词换行控制
• word-break：单词断行控制
• white-space：空白处理
• direction：文本方向
• unicode-bidi：双向文本控制

实际应用：

• 创建立体的文字效果
• 处理文本溢出
• 控制单词换行
• 处理长单词
• 支持多语言文本
• 优化文本显示

最佳实践：

• 合理使用文本阴影
• 优雅处理文本溢出
• 控制单词换行
• 考虑可访问性
• 保持代码简洁
• 优化性能

优势：

• 增强文本视觉效果
• 改善文本可读性
• 支持多语言
• 提高用户体验
• 减少图像依赖

掌握 CSS3 文本属性，能够让我们创建更加丰富和美观的文本效果，同时更好地控制文本的显示和溢出处理，大大提升网页的视觉效果和用户体验。