具有絕對 position 的嵌套元素上的文本溢出省略號

Question

我正在嘗試找到一種在與綠色容器右側的接觸點使用文本省略號的方法。 我此時的印象是，當文本框絕對是 position 包裝器的一部分時，這實際上可能在 CSS 中不可能做到。

有沒有辦法只用 CSS 做到這一點？ 這是否只能通過 javascript 來動態計算文本框的寬度以創建它受綠色容器大小約束的錯覺？

該解決方案不能涉及刪除絕對定位。 這是對更復雜的 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

您可以將絕對容器設置為 go 到 0 的右側。並設置 position 相對於您希望它作為其相對參考的父容器，正如您所說，它是綠色的。 –

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