文字重叠的 CSS 属性

使用 letter-spacing 和 line-height 实现文字重叠效果

问题

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

解答

实现文字重叠的两个属性：

水平重叠：letter-spacing（字符间距）
垂直重叠：line-height（行高）

水平重叠：letter-spacing

.horizontal-overlap {
  /* 负值让字符向左靠拢，产生重叠 */
  letter-spacing: -5px;
}

<p class="horizontal-overlap">OVERLAP</p>

垂直重叠：line-height

.vertical-overlap {
  /* 行高小于字体大小时，多行文字会重叠 */
  font-size: 24px;
  line-height: 12px;
}

<p class="vertical-overlap">
  第一行文字<br>
  第二行文字<br>
  第三行文字
</p>

完整示例

<!DOCTYPE html>
<html>
<head>
  <style>
    .demo {
      font-size: 24px;
      margin: 40px;
    }
    
    /* 水平重叠 */
    .h-overlap {
      letter-spacing: -8px;
    }
    
    /* 垂直重叠 */
    .v-overlap {
      line-height: 16px;
    }
    
    /* 同时重叠 */
    .both-overlap {
      letter-spacing: -5px;
      line-height: 18px;
    }
  </style>
</head>
<body>
  <p class="demo h-overlap">HORIZONTAL</p>
  
  <p class="demo v-overlap">
    Line One<br>
    Line Two<br>
    Line Three
  </p>
  
  <p class="demo both-overlap">
    BOTH<br>
    OVERLAP
  </p>
</body>
</html>

关键点

letter-spacing 设置负值可实现水平方向文字重叠
line-height 设置小于 font-size 的值可实现垂直方向文字重叠
两个属性可以组合使用，同时实现水平和垂直重叠
文字重叠常用于特殊的视觉设计效果