在CSS文本排版中，line-height属性用于设置文本行之间的垂直间距，当该属性的值设置过小时，会导致相邻行的文字出现重叠，严重影响页面的可读性和美观度。这种问题在内容较多的段落中尤为明显，需要开发者及时排查并修复。
问题产生的原因
line-height的默认值是normal，不同浏览器对normal的计算规则略有差异，通常相当于字体大小的1.2倍左右。如果开发者手动将line-height设置为小于字体大小的值，或者使用了不合理的单位，就会出现行间距不足的情况，最终导致文字重叠。
比如当字体大小为16px，却将line-height设置为12px时，每行的高度只有12px，而文字本身的高度加上上下留白就会超过这个数值，相邻行的文字自然会重叠在一起。
修复方法
1. 调整line-height为合理数值
最直接的方法是增大line-height的取值，保证其不小于当前元素的字体大小。line-height支持多种取值方式，开发者可以根据需求选择：
- 数字：直接写数字，比如1.5，表示行高是字体大小的1.5倍，推荐使用这种方式，子元素会继承这个比例而不是固定值
- 像素值：比如24px，设置固定的行高，子元素会继承这个固定值
- 百分比：比如150%，表示行高是字体大小的150%
- em单位：比如1.5em，和百分比类似，基于当前字体大小计算
以下是调整line-height的示例代码：
/* 原问题代码，line-height过小导致重叠 */
p {
font-size: 16px;
line-height: 12px; /* 行高小于字体大小，会出现重叠 */
}
/* 修复后的代码，使用数字取值 */
p {
font-size: 16px;
line-height: 1.5; /* 行高为16*1.5=24px，足够容纳文字 */
}
/* 修复后的代码，使用像素取值 */
p {
font-size: 16px;
line-height: 24px;
}
2. 检查是否存在样式覆盖
有时候line-height已经被正确设置，但被其他优先级更高的样式覆盖了，这时候需要检查样式优先级。可以通过浏览器的开发者工具查看元素的最终计算样式，找到覆盖line-height的规则并调整。
比如以下代码中，内联样式的优先级高于内部样式，会导致line-height被设置为12px：
<style>
p {
font-size: 16px;
line-height: 1.5;
}
</style>
<p style="line-height: 12px;">这是一段测试文字，当行高过小时会出现重叠情况，需要调整行高来保证显示正常。</p>
修复方法是删除内联样式中不合理的line-height设置，或者提高内部样式的优先级：
/* 提高优先级，覆盖内联样式的不合理设置 */
p[style] {
line-height: 1.5 !important;
}
3. 处理特殊场景的line-height问题
如果段落中包含图片、行内块元素等特殊内容，也可能会影响line-height的计算。这时候可以给这些特殊元素设置vertical-align: middle，或者调整父元素的line-height规则。
示例代码如下：
p {
font-size: 16px;
line-height: 1.5;
}
p img {
vertical-align: middle; /* 调整图片对齐方式，避免影响行高计算 */
height: 20px;
}
注意事项
在使用line-height时，需要注意以下几点：
- 尽量不要给line-height设置过小的固定像素值，尤其是当字体大小可能动态变化的时候，使用数字比例取值更灵活
- 行内元素的line-height会生效，但是它的高度不会被子元素继承，块级元素的line-height会被子元素继承比例值
- 如果设置了
white-space: nowrap强制文字不换行，line-height过小只会影响单行高度，不会出现多行重叠，但可能导致文字超出容器
总结
修复CSS中line-height过小导致的段落重叠问题，核心是调整line-height到合理数值，同时排查是否存在样式覆盖或者特殊元素影响的情况。合理设置line-height不仅能避免文字重叠，还能提升文本的可读性，是网页排版中非常重要的一环。
CSSline-height段落重叠文本排版修改时间：2026-07-11 07:39:21