css3 文本效果(text-shadow、text-overflow、word-wrap、word-break)文本阴影、文本换行、文本溢出并隐藏显示省略号

1. 文本阴影（text-shadow）

1.1 基本语法

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

参数说明：

• h-shadow：必需。水平阴影的位置。允许负值。
  • 正值：向右偏移
  • 负值：向左偏移
• v-shadow：必需。垂直阴影的位置。允许负值。
  • 正值：向下偏移
  • 负值：向上偏移
• blur-radius：可选。模糊的距离。默认为0。
  • 值越大，模糊效果越强
  • 不允许负值
• color：可选。阴影的颜色。默认为文字颜色。
  • 可使用各种颜色表示方法：关键字、HEX、RGB、RGBA等

1.2 常用效果示例

1. 发光效果

.glow-text {color: #ffffff;text-shadow: 0 0 10px #00ff00;
}

效果图：

2. 多重阴影

.multiple-shadow {text-shadow: 2px 2px 0 #ff0000,4px 4px 0 #00ff00,6px 6px 0 #0000ff;
}

效果图：

3. 立体文字效果

.d3-text {color: #ffffff;text-shadow: 1px 1px 1px #919191,1px 2px 1px #919191,1px 3px 1px #919191,1px 4px 1px #919191,1px 5px 1px #919191,1px 6px 1px #919191,1px 7px 1px #919191,1px 8px 1px #919191,1px 9px 1px #919191;
}

效果图：

2. 文本溢出（text-overflow）

2.1 单行文本溢出

.single-line-ellipsis {white-space: nowrap;     /* 禁止文本换行 */overflow: hidden;        /* 隐藏溢出内容 */text-overflow: ellipsis; /* 显示省略符号 */
}

参数说明：

• text-overflow 可选值：
  • clip：直接裁剪文本
  • ellipsis：显示省略号
  • string：使用自定义字符串（部分浏览器支持）

效果图：

2.2 多行文本溢出

.multi-line-ellipsis {display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3; /* 显示行数 */overflow: hidden;
}

参数说明：

• -webkit-line-clamp：设置显示的行数
  • 必须是正整数
  • 超出的行将被截断并显示省略号

效果图：

3. 换行处理（word-wrap & word-break）

3.1 word-wrap

.word-wrap-example {word-wrap: break-word; /* 允许在单词内换行 */
}

参数说明：

• word-wrap 可选值：
  • normal：只在允许的断字点换行（默认）
  • break-word：在单词内部换行
  • anywhere：任意字符间都可能换行

效果图：

3.2 word-break

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

参数说明：

• word-break 可选值：
  • normal：使用默认的换行规则
  • break-all：允许在任意字符间断行
  • keep-all：中文/韩文/日文不断行，其他语言正常处理
  • break-word：与 word-wrap: break-word 效果相同

效果图：