如何用CSS消除文本元素行间距？line-height负值无效

针对单个文本元素内行间距过大（需移除红色空白区域），且无法使用负line-height、不能拆分元素的问题，推荐以下两种可行方法：

方法1：垂直缩放元素 #

通过transform: scaleY()缩小元素的垂直尺寸，配合line-height: 0实现行重叠：

#my_line{
  overflow-wrap: break-word;
  line-height: 0;
  display: inline-block; /* 使transform生效 */
  transform: scaleY(0.4); /* 数值越小，行重叠程度越高，按需调整 */
  transform-origin: top left; /* 固定缩放原点，避免整体偏移 */
}

方法2：相对定位偏移文本 #

利用position: relative设置负top值，让文本行向上偏移重叠：

#my_line{
  overflow-wrap: break-word;
  line-height: 0;
  display: inline-block;
  position: relative;
  top: -6px; /* 根据字体大小调整负值，直到红色区域消失 */
}

两种方法都无需拆分元素，完美避开line-height不能设负值的限制，可根据实际效果调整参数。

内容的提问来源于stack exchange，提问作者Mykyta_GloryToUkraine