具有绝对 position 的嵌套元素上的文本溢出省略号

Question

I'm trying to find a way to have text ellipsis at the point of contact with the righthand side of the green container. My impression at this time is that this might actually be impossible to do in CSS when the text box is part of an absolutely position wrapper.

Is there a way of doing this with CSS only? Is this only doable via javascript to dynamically calculate the width of the text box to create the illusion that it is bound by the size of the green container?

The solution cannot involve removing the absolute positioning. This is a simple extrapolation of a more complicated UX.

<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>

* { 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;
}

Answer 1

You could set the absolute container to go to the right of 0. And set the position relative to the parent container which you want it to take as its relative reference, which, as you say, is the green one. –

 * { background-color: white; box-sizing: border-box;}.container { position: relative; border: 3px solid lightgreen; background: lightgray; width: 10%; }.relative { height: 100px; border: 2px black solid; width: 30%; }.absolute { border: 2px solid blue; position: absolute; bottom: 10px; left: 10px; right: 0; }.text { border: 2px solid red; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

 <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>