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

参考答案：

  • 垂直方向：line-height。
  • 水平方向：letter-spacing。

通过把 line-height 设成小于字体大小的值，可以让多行文字在垂直方向上重叠；通过把 letter-spacing 设成负值可以让相邻字符在水平方向上重叠。

关于 letter-spacing 的妙用

参考答案：可以用于消除 inline-block 元素间的换行符空格间隙问题。

消除 display: inline-block 元素间的换行符空格间隙的方法：

想把一些元素在一行显示，最简单的方法是 display: inline-block，变成行内块元素；但是同行显示的 inline-block 元素之间会有一个换行符，一般占据 4px 位置（例如 Chrome 浏览器字体默认大小 16px，行内块元素间隔 4px，字体大小越大间隔越大）。

解决行内块间隔的方法

1. 直接去掉换行符或注释换行

<div class="wrap">
    <div class="div1">div1</div><div class="div2">div2</div>
    <div class="div3">div3</div>
    <div class="div4"></div>
</div>

<!-- 或者 -->
<div class="wrap">
    <div class="div1">div1</div><!--
    --><div class="div2">div2</div>
    <div class="div3">div3</div>
    <div class="div4"></div>
</div>

2. 使用浮动 float

缺点：浮动元素会脱离文档流，但可以通过清除浮动解决。

3. letter-spacing 消除 inline-block 元素间的换行符空格间隙

.wrap {
    width: 500px;
    height: 100px;
    border: 1px solid red;
    /* letter-spacing 消除 inline-block 元素间的换行符空格间隙问题 */
    letter-spacing: -4px;
}
/* 子元素需要恢复 */
.wrap > * {
    letter-spacing: normal;
}

补充：

  • 关于"文字重叠"的本质：
    • line-height 是行框盒子的高度，小于 font-size 时，文字会超出上下行框边界，与上一行/下一行的文字在视觉上重叠；
    • letter-spacing 决定字符水平间距，负值会让字符挤压、重叠。
  • 现代项目里想让 inline-block 同行时，更推荐直接使用 display: flex，无需关心负 margin / 负 letter-spacing 这些 hack。