CSS 高级文本效果

文本不止于排版

字体和基础样式掌握之后，还能给文字加些更细腻的效果，比如阴影、省略号、换行控制。这些效果在真实项目里出现频率极高，尤其是省略号，几乎是必考的面试题。

text-shadow 文字阴影

text-shadow 给文字添加阴影，参数依次是水平偏移、垂直偏移、模糊半径、颜色。

.title {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

偏移值可以是负数，模糊半径越大越模糊，0 就是不模糊的硬影。多个阴影用逗号叠加，先写的在上层。

.title {
  /* 两层阴影叠加，做出文字发光的感觉 */
  text-shadow: 0 0 5px #fff, 0 0 10px #0ff;
}

第一个值是水平偏移，第二个值是垂直偏移，如果两个都是 0，阴影就均匀扩散在文字四周，这是做发光效果的关键。

white-space 空白符处理

HTML 里连续的多个空格在浏览器中默认只会显示一个，white-space 控制这种行为。normal 是默认，空白符折叠。nowrap 禁止换行，所有文字挤在一行。pre 保留空白和换行，类似 pre 标签的默认行为。

.code {
  white-space: pre;      /* 保留代码里的空格和换行 */
}
.one-line {
  white-space: nowrap;   /* 不换行，配合省略号使用 */
}

单行省略号三件套

文本太长一行放不下时，常见需求是超出部分显示省略号。经典写法是三件套，缺一不可。

.ellipsis {
  white-space: nowrap;       /* 禁止换行 */
  overflow: hidden;          /* 超出部分隐藏 */
  text-overflow: ellipsis;   /* 隐藏部分显示省略号 */
}

三个属性缺一个都不出效果，忘了 overflow 省略号不出现，忘了 nowrap 文字会折行。这是出现频率最高的文本效果，建议背下来。

多行省略号

单行省略号只适用于一行，多行文本可以用 -webkit-line-clamp。

.clamp2 {
  display: -webkit-box;            /* 弹性盒模型 */
  -webkit-box-orient: vertical;    /* 垂直排列 */
  -webkit-line-clamp: 2;           /* 限制两行 */
  overflow: hidden;
}

注意三点，display 要用 -webkit-box，方向要垂直，最后还要 overflow: hidden。这个写法带 -webkit- 前缀，主要针对 WebKit 内核浏览器，现代浏览器基本都支持，但其他内核需要测试。

word-break 与 overflow-wrap

英文长单词和超长 URL 会撑破容器，需要控制换行位置。word-break: break-all 允许在单词中间断行，一个字一个字地挤下去。overflow-wrap: break-word 优先在单词边界换行，实在不行才断单词。

.url-box {
  overflow-wrap: break-word;   /* 长 URL 不会撑破容器 */
}
.card {
  word-break: break-all;       /* 允许单词内断行 */
}

区别一句话，break-word 优雅，尽量完整换词，break-all 激进，能塞就塞。中文本身按字换行，一般不会遇到这个问题，主要防的是英文和网址。

小结

这一篇的效果都是锦上添花的类型，但省略号三件套和多行省略号在真实项目里几乎天天用。加上前面两篇，文本与字体的基础就完整了，配合之前学过的选择器和伪类，可以参考CSS 伪类巩固一下。下一篇进入颜色体系，看看颜色到底有几种写法。