# CSS3核心特性-第8章-8.2-文本样式高级特性 ## 一、学习目标 - 掌握 `text-shadow` 实现文本阴影效果的语法及多阴影叠加技巧 - 理解 `word-wrap` 与 `overflow-wrap` 的区别及换行控制场景 - 熟练运用 `text-overflow` 处理文本溢出显示省略号的实现方法 - 了解 `letter-spacing`、`word-spacing` 等高级文本间距控制属性 ## 二、概念讲解 文本样式是网页视觉设计的核心组成部分，CSS3在传统文本样式基础上新增了多项高级特性，使文本呈现更加灵活和富有表现力。**文本阴影**可增强文本层次感，**智能换行**解决长单词溢出问题，**溢出控制**优化有限空间内的文本显示，**间距调整**提升文本可读性。这些特性共同作用于文本的视觉呈现与用户体验，是构建高品质UI的基础技能。 ## 三、语法参考 ### 3.1 文本阴影（`text-shadow`） | 属性语法 | 取值说明 | 兼容性 | | --------------------------------------------------- | ------------------------------------------------------------ | --------------------- | | `text-shadow: h-offset v-offset blur-radius color;` | - `h-offset`：水平偏移量（必填，可负值）
- `v-offset`：垂直偏移量（必填，可负值）
- `blur-radius`：模糊半径（可选，默认0）
- `color`：阴影颜色（可选，默认文本颜色） | IE10+、所有现代浏览器 | **多阴影叠加**：用逗号分隔多个阴影参数，实现多层阴影效果 ```css text-shadow: 1px 1px 2px rgba(0,0,0,0.3), 3px 3px 5px rgba(255,0,0,0.2); ``` ### 3.2 换行控制 | 属性 | 取值 | 作用 | 兼容性 | | --------------- | ------------------------------------ | ------------------------------------------------------------ | --------------------------------- | | `word-wrap` | `normal` | `break-word` | 控制长单词是否允许在单词内换行 | IE5.5+、所有现代浏览器 | | `overflow-wrap` | `normal` | `break-word` | `anywhere` | `word-wrap` 的标准别名，新增 `anywhere` 值（优先换行且不考虑连字符） | IE不支持、Chrome 49+、Firefox 43+ | ### 3.3 文本溢出（`text-overflow`） 需配合 `white-space: nowrap` 和 `overflow: hidden` 使用，仅单行文本有效 | 属性语法 | 取值 | 效果 | | --------------------------------- | ------------ | --------------------------------------- | | `text-overflow: clip` | 默认值 | 直接裁剪溢出文本 | | `text-overflow: ellipsis` | 省略号 | 溢出部分显示 `...` | | `text-overflow: ''` | 自定义字符串 | 仅Firefox支持，如 `text-overflow: '>>'` | ### 3.4 文本间距 | 属性 | 取值 | 作用 | | ---------------- | ----------------------------- | -------------------------------- | | `letter-spacing` | 长度值（px/em/rem等，可负值） | 控制字符间距 | | `word-spacing` | 长度值（px/em/rem等，可负值） | 控制单词间距（以空格分隔的单词） | ## 四、实战示例 ### 示例1：立体文本效果（`text-shadow` 叠加） ```html

立体标题文本

``` **效果**：文本呈现红色立体层次感，底层阴影逐渐加深并添加轻微模糊，增强视觉深度。 ### 示例2：长URL自动换行（`overflow-wrap`） ```html ``` **效果**：长URL在容器边界处自动换行，避免水平溢出，而不是被截断或撑开容器。 ### 示例3：单行文本溢出省略号（`text-overflow: ellipsis`） ```html ``` **效果**：文本在250px宽度内单行显示，超出部分以 `...` 结尾，鼠标悬停时可通过 `title` 属性显示完整文本（需额外添加）。 ### 示例4：字符间距调整（`letter-spacing`） ```html

紧凑文本（负间距）

疏松文本（正间距）

``` **效果**：第一行文本字符间距缩小，适合标题紧凑排版；第二行字符间距增大，提升长文本可读性。 ## 五、注意事项 ### 5.1 兼容性处理 - **IE浏览器**：`text-shadow` 仅IE10+支持，低版本需使用滤镜模拟（如 `filter: DropShadow(color=#000000, offx=1, offy=1)`），但效果较差，建议渐进增强。 - **`text-overflow` 自定义字符串**：仅Firefox支持，其他浏览器需通过JavaScript实现类似效果。 - **`overflow-wrap: anywhere`**：IE和旧版Chrome不支持，如需兼容可降级使用 `word-wrap: break-word`。 ### 5.2 性能优化 - **避免过度使用文本阴影**：多层复杂 `text-shadow` 会增加GPU渲染负担，移动端可能导致卡顿，建议阴影层数不超过3层，模糊半径不超过10px。 - **谨慎使用负间距**：过度缩小 `letter-spacing` 可能导致字符重叠，影响可读性，建议负间距绝对值不超过 `0.5px`。 ### 5.3 常见错误 - ❌ 错误：未设置 `overflow: hidden` 和 `white-space: nowrap` 直接使用 `text-overflow: ellipsis`，导致省略号不生效。 ✅ 正确：三者必须同时设置，且容器需有明确宽度。 - ❌ 错误：对多行文本使用 `text-overflow: ellipsis`，期望显示省略号。 ✅ 正确：`text-overflow` 仅支持单行文本，多行省略需使用 `-webkit-line-clamp`（WebKit内核）或JavaScript实现。 ## 六、自测题 1. **选择题**：以下哪个CSS属性组合可实现单行文本溢出显示省略号？ A. `text-overflow: ellipsis;` B. `overflow: hidden; text-overflow: ellipsis;` C. `white-space: nowrap; overflow: hidden; text-overflow: ellipsis;` D. `word-wrap: break-word; text-overflow: ellipsis;` （正确答案：C） 2. **实操题**：编写CSS实现“蓝色文本，水平偏移2px、垂直偏移2px、模糊半径4px的黑色阴影，字符间距1px”的标题样式。 （参考答案：`color: blue; text-shadow: 2px 2px 4px #000; letter-spacing: 1px;`） 3. **分析题**：`word-wrap: break-word` 和 `overflow-wrap: anywhere` 在处理长URL换行时有何区别？ （参考答案：`anywhere` 会优先在任意字符间换行以避免溢出，且不考虑连字符规则，更适合URL等无空格长文本；`break-word` 会尽量在单词边界换行，可能导致更多空白空间。） 通过本章学习，你已掌握文本样式的高级控制技巧，能够实现阴影、换行、溢出、间距等精细化调整。这些技能在按钮文本、标题设计、卡片描述等场景中应用广泛，是提升UI质感的关键环节。建议结合实际项目多练习不同属性的组合效果，加深理解。