Text-overflow ellipsis on a nested element with absolute position

jaimefps 0
Viewed 34

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

enter image description here

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

javascript css
1 Answers

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>

Eudes Serpa0
Related