CSS实现文本省略号时span文本底部被遮挡的解决办法

这个问题我之前也碰到过，核心原因是字体里的下行字母（比如g、y、p这类底部会延伸的字母）超出了元素的默认高度，再加上overflow:hidden直接截断了超出部分；换成overflow:auto时，滚动条又会占用容器宽度，进一步挤压文本空间导致底部被挡。

下面是几个亲测有效的解决方案，既能保留省略号效果，又能完整显示所有字母：

方案1：调整行高+底部内边距 #

给span设置合适的line-height和padding-bottom，为下行字母预留足够空间，同时保持overflow:hidden：

.parentDiv {
  position: relative;
  width: 100%;
}
.parentDiv > span {
  display: inline-block;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: middle;
  line-height: 1.4; /* 根据你的字体大小调整，比如16px字体用1.4~1.5的行高 */
  padding-bottom: 2px; /* 给下行字母留一点额外空间，避免被截断 */
}

这个方法的关键是让元素高度足够容纳字体的完整字形（包括上行和下行部分），而不是只容纳基线到顶线的高度。

方案2：固定高度配合行高（字体大小固定场景） #

如果你的字体大小是固定值，可以直接设置height和line-height相等，再通过高度预留出下行字母的空间：

.parentDiv > span {
  /* 其他属性不变 */
  font-size: 16px;
  height: 22px; /* 比字体大小大4px，刚好容纳下行部分 */
  line-height: 22px;
  padding-bottom: 0; /* 这里不需要额外内边距，高度已经预留了空间 */
}

为什么不用overflow:auto？ #

因为我们已经通过text-overflow:ellipsis实现了文本截断并显示省略号，完全不需要滚动条来展示隐藏内容，所以保持overflow:hidden是最优选择，只要调整好元素的高度/行高就能解决问题。

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