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

1. 文本阴影（text-shadow）

1.1 基本语法

css 复制代码

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

参数说明：

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

1.2 常用效果示例

发光效果

css 复制代码

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

效果图：

多重阴影

css 复制代码

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

效果图：

立体文字效果

css 复制代码

.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 单行文本溢出

css 复制代码

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

参数说明：

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

效果图：

2.2 多行文本溢出

css 复制代码

.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

css 复制代码

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

参数说明：

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

效果图：

3.2 word-break

css 复制代码

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

参数说明：

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

效果图：