Firefox环境下img标签alt文本居中及溢出省略实现需求

针对你提出的需求，以下代码仅适配最新版Firefox，无需使用margin、padding或line-height即可实现目标效果：

HTML 结构 #

<div class="image-wrapper">
  <img src="non-existent-image.jpg" alt="这是一段用于测试的超长文本，用来验证单行省略是否正常工作" />
</div>

CSS 样式 #

.image-wrapper {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 图片加载成功时保持比例填充容器 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

原理说明 #

• 外层容器使用flex布局，通过align-items: center和justify-content: center实现内部内容（包括加载失败时的alt文本）的垂直水平居中，完全不需要依赖固定高度的line-height。
• 图片本身设置width: 100%和height: 100%，确保填充容器；object-fit: cover保证图片加载成功时正常显示。
• white-space: nowrap、overflow: hidden和text-overflow: ellipsis组合实现alt文本过长时的单行省略效果。

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