绝对定位嵌套元素的text-overflow省略号实现问题

我希望文本碰到绿色容器右侧时显示省略号，目前认为当文本框处于绝对定位包裹元素中时，仅用CSS可能无法实现。请问是否有纯CSS实现方案？是否只能通过JavaScript动态计算文本框宽度，模拟其受绿色容器尺寸限制的效果？注：解决方案不能移除绝对定位，这是复杂交互场景的简化示例。

原代码 #

CSS

* {
  background-color: white;
}

.container {
  border: 3px solid lightgreen;
  background: lightgray;
  width: 10%;
}

.relative {
  position: relative;
  height: 100px;
  border: 2px black solid;
  width: 30%;
}

.absolute {
  border: 2px solid blue;
  position: absolute;
  bottom: 10px;
  left: 10px;
}

.text {
  border: 2px solid red;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

HTML

<div class="container">
  <div class="relative">
    <div class="absolute">
      <div class="text">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      </div>
    </div>
  </div>
</div>

纯CSS解决方案 #

不需要依赖JavaScript，通过调整定位参考和宽度约束就能实现需求：

方案一（推荐，适配动态宽度）

1. 给最外层的.container添加position: relative，让绝对定位的.absolute以它为定位基准
2. 给.absolute添加right: 0，结合已有的left: 10px，让它的宽度被绿色容器的左右边界限制

修改后的CSS：

* {
  background-color: white;
}

.container {
  border: 3px solid lightgreen;
  background: lightgray;
  width: 10%;
  position: relative; /* 设置为定位基准 */
}

.relative {
  position: relative;
  height: 100px;
  border: 2px black solid;
  width: 30%;
}

.absolute {
  border: 2px solid blue;
  position: absolute;
  bottom: 10px;
  left: 10px;
  right: 0; /* 限制右侧边界，宽度自动为container宽度 - 10px */
}

.text {
  border: 2px solid red;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

原理：把.container设为定位基准后，.absolute的宽度会被left和right属性共同约束，刚好填充绿色容器内从左侧10px到右边界的区域，文本框的宽度受限于此，自然触发省略号效果。

方案二（无需修改容器定位，硬编码宽度）

如果场景限制不能修改.container的定位属性，可以直接给.absolute设置max-width，计算值为绿色容器宽度减去左侧偏移量：

.absolute {
  /* 其他属性不变 */
  max-width: calc(10% - 10px); /* 10%对应container的宽度，10px对应left偏移 */
}

缺点是宽度值为硬编码，如果绿色容器宽度动态变化，需要同步更新这个值。

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