如何在第二行的 div 内对绝对定位的跨度进行文本溢出？答案

【问题标题】：How to text-overflow an absolute positioned span inside a div on the 2nd line?如何在第二行的 div 内对绝对定位的跨度进行文本溢出？
【发布时间】：2021-09-10 14:18:58
【问题描述】：

我希望此描述文本的第二行有 text-overflow: ellipsis。但似乎我的代码不起作用。

<div class="container">
  <span
    >Test test test testTest test test testTest test test testTest test test
    testTest test test testTest test test testTest test test test</span
  >
</div>

和 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;
    overflow: hidden;
    line-clamp: 2;
    text-overflow: ellipsis;
  }

【问题讨论】：

标签： html css

【解决方案1】：

我不是这方面的专家，但似乎line-clamp 是问题所在。很遗憾，line-clamp is still in draft 还没有支持。

请see this answer 获取替代方案。

【讨论】：

【解决方案2】：

为了解决这个问题，line-clamp: 2 应该以 -webkit 为前缀。并且需要添加两个属性display: -webkit-box，-webkit-box-orient: vertical，没有这个组合line-clamp不起作用。 text-overflow: ellipsis你可以删除。

span {
  position: absolute;
  color: white;
  bottom: 32px;
  left: 8px;
  overflow: hidden;
  -webkit-line-clamp: 2; /*changed */
  /* text-overflow: ellipsis; */ /* can be remove */
  display: -webkit-box; /* new line */
  -webkit-box-orient: vertical; /* new line */
}

.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;
  overflow: hidden;
  -webkit-line-clamp: 2; /*changed */
  /* text-overflow: ellipsis; */ /* can be remove */
  display: -webkit-box; /* new line */
  -webkit-box-orient: vertical; /* new line */
}

<div class="container">
  <span>Test test test testTest test test testTest test test testTest test test testTest test test
        testTest test test testTest test test test</span
      >
    </div>

【讨论】：