如何让div内绝对定位的span在第2行实现text-overflow省略号效果

问题原因 #

现有代码缺少line-clamp属性生效的必要配套属性，同时绝对定位的行内元素未限定最大宽度，无法触发溢出判定规则。

修改后完整CSS代码 #

.container {
  position: relative;
  width: 320px;
  height: 220px;
  background-image: url("https://terrigen-cdn-dev.marvel.com/content/prod/1x/popsicle_heroesscreenshot_legal.jpg");
}

span {
  position: absolute;
  color: white;
  bottom: 32px;
  left: 8px;
  right: 8px; /* 替代固定宽度设置，自动适配容器宽度 */
  overflow: hidden;
  /* 新增以下3个line-clamp生效必备属性 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  /* 可选配置：指定行高避免高度计算误差 */
  line-height: 1.5;
}

关键修改说明 #

• 新增display: -webkit-box：将元素转为webkit弹性盒模型，是行数限制生效的基础条件
• 新增-webkit-line-clamp: 2：兼容主流浏览器的前缀写法，明确限制文本最多显示2行
• 新增-webkit-box-orient: vertical：设置盒内内容垂直排列，配合行数限制规则生效
• 新增right: 8px：通过左右定位限定span的最大宽度，保证内容超出容器宽度时触发溢出判定

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