跳到主要内容

CSS 中让文字在垂直和水平方向上“重叠”的两个属性是什么？

面试速答（30 秒版 TL;DR）​

  • 垂直方向（行与行之间）：主要靠 line-height（行高）压缩到小于 font-size，相邻行就可能发生重叠。
  • 水平方向（字与字之间）：主要靠 letter-spacing 设为负值，让字符间距变小甚至重叠（英文也可用 font-kerning/字体本身字偶距，但面试常答 letter-spacing）。

关键机制：它们分别控制什么​

1）line-height：控制行盒高度（影响上下行的间距）​

  • 一行文本会形成 line box（行盒），line-height 影响行盒的最小高度。
  • 当 line-height < font-size 时，浏览器仍会排版，但上下行的视觉区域可能发生覆盖/挤压（不同字体度量会让效果更明显）。

示例（两行重叠）：

<p class="t">第一行文字</p>
<p class="t">第二行文字</p>
.t {
  font-size: 32px;
  line-height: 20px; /* 小于 font-size，可能出现上下行重叠 */
  margin: 0;
}

2）letter-spacing：控制字符间距（影响左右方向）​

  • letter-spacing 可以取负值。
  • 负值越大（绝对值越大），字符越“挤”，甚至覆盖到一起。

示例（字符重叠）：

<p class="h">OVERLAP</p>
.h {
  font-size: 48px;
  letter-spacing: -0.2em; /* 负字距：字符会更挤甚至重叠 */
}

典型题 & 标准答法​

Q1：为什么 line-height 调小会导致“行重叠”？​

答：因为 line-height 控制行盒高度，当行盒高度小于字体实际占用的视觉高度时，相邻行的绘制区域可能互相覆盖。

Q2：水平“重叠”除了 letter-spacing 还有别的办法吗？​

答：还可以用 transform: scaleX() 压缩宽度、或选择更紧凑的字体/字偶距；但面试题问“两个属性”，通常期望回答 line-height + letter-spacing。

易错点/坑​

  • 可读性与可访问性：重叠文本对阅读器/选中文本/复制体验都可能很差，通常只用于装饰性标题。
  • 不同字体表现差异大：同样的 line-height/letter-spacing 在不同字体下效果不一致。
  • 过小的 line-height 可能导致文本被裁剪（尤其在容器设置了 overflow: hidden 时）。

速记要点（可背诵）​

  • 垂直重叠看 line-height，水平重叠看 letter-spacing（负值）。