CSS3核心特性-第8章-8.2-文本样式高级特性

一、学习目标

• 掌握 text-shadow 实现文本阴影效果的语法及多阴影叠加技巧
• 理解 word-wrap 与 overflow-wrap 的区别及换行控制场景
• 熟练运用 text-overflow 处理文本溢出显示省略号的实现方法
• 了解 letter-spacing、word-spacing 等高级文本间距控制属性

二、概念讲解

文本样式是网页视觉设计的核心组成部分，CSS3在传统文本样式基础上新增了多项高级特性，使文本呈现更加灵活和富有表现力。文本阴影可增强文本层次感，智能换行解决长单词溢出问题，溢出控制优化有限空间内的文本显示，间距调整提升文本可读性。这些特性共同作用于文本的视觉呈现与用户体验，是构建高品质UI的基础技能。

三、语法参考

3.1 文本阴影（text-shadow）

多阴影叠加：用逗号分隔多个阴影参数，实现多层阴影效果

text-shadow: 1px 1px 2px rgba(0,0,0,0.3), 3px 3px 5px rgba(255,0,0,0.2);

3.2 换行控制

3.3 文本溢出（text-overflow）

需配合 white-space: nowrap 和 overflow: hidden 使用，仅单行文本有效

3.4 文本间距

四、实战示例

示例1：立体文本效果（text-shadow 叠加）

<h1 class="stereo-text">立体标题文本</h1>

<style>
.stereo-text {
  font-size: 48px;
  font-weight: bold;
  color: #ff6b6b;
  /* 多层阴影模拟立体效果 */
  text-shadow: 
    1px 1px 0px #e05555,
    2px 2px 0px #cc4a4a,
    3px 3px 0px #b83f3f,
    4px 4px 5px rgba(0,0,0,0.2);
}
</style>

效果：文本呈现红色立体层次感，底层阴影逐渐加深并添加轻微模糊，增强视觉深度。

示例2：长URL自动换行（overflow-wrap）

<div class="url-container">
  <p>长URL示例：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Text/Wrapping_Text</p>
</div>

<style>
.url-container {
  width: 200px; /* 固定窄容器 */
  border: 1px solid #ddd;
  padding: 10px;
}
.url-container p {
  overflow-wrap: break-word; /* 允许URL在单词内换行 */
  /* word-wrap: break-word; 旧版浏览器兼容写法 */
}
</style>

效果：长URL在容器边界处自动换行，避免水平溢出，而不是被截断或撑开容器。

示例3：单行文本溢出省略号（text-overflow: ellipsis）

<div class="ellipsis-demo">
  <p>这是一段超长的单行文本，当容器宽度不足时，超出部分将显示省略号。</p>
</div>

<style>
.ellipsis-demo {
  width: 250px;
  border: 1px solid #eee;
  padding: 8px;
}
.ellipsis-demo p {
  white-space: nowrap; /* 强制单行显示 */
  overflow: hidden;   /* 隐藏溢出内容 */
  text-overflow: ellipsis; /* 溢出部分显示省略号 */
  margin: 0;
}
</style>

效果：文本在250px宽度内单行显示，超出部分以 ... 结尾，鼠标悬停时可通过 title 属性显示完整文本（需额外添加）。

示例4：字符间距调整（letter-spacing）

<p class="tight-text">紧凑文本（负间距）</p>
<p class="loose-text">疏松文本（正间距）</p>

<style>
.tight-text {
  letter-spacing: -0.5px; /* 字符间距缩小 */
  font-size: 16px;
}
.loose-text {
  letter-spacing: 2px; /* 字符间距增大 */
  font-size: 16px;
}
</style>

效果：第一行文本字符间距缩小，适合标题紧凑排版；第二行字符间距增大，提升长文本可读性。

五、注意事项

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质感的关键环节。建议结合实际项目多练习不同属性的组合效果，加深理解。