絕對定位元素的寬度

Question

我已經絕對定位 div 元素 ( .tooltip ) 和另一個 div ( .text ) 里面有文本 (設置了max-width )。 當.tooltip的left屬性足夠大時，它的寬度會縮小（我猜是因為right屬性的默認值為 0）。 我想要的是.tooltip尊重.text （它的內容）的寬度。 我試過的：

1. 將tooltip的寬度設置為fit-content - 這基本上是我想要實現的（顯示在代碼片段中）但它不適用於 IE（我必須支持）。 沒有.tooltip的寬度會縮小。

2. 設置tooltip或text的固定寬度 - 也是不可能的，因為text div 中的文本可能很短，然后會有空白空間。

3. 另一方面，文本可能真的很長，所以我無法像類似問題中建議的那樣設置white-space: nowrap 。

 .tooltip { position: absolute; border: 1px solid red; left: 400px; width: fit-content; }.text { max-width: 200px; }

 <div style="border: 1px solid green;width:500px; height: 500px; position:relative"> <div class="tooltip"> <div class="text">test test test test test test test test test</div> </div> </div>

Answer 1

想法是用翻譯替換left ：

 .tooltip { position: absolute; border: 1px solid red; left: 0; transform:translateX(400px); }.text { max-width: 200px; }

 <div style="border: 1px solid green;width:500px; height: 500px; position:relative"> <div class="tooltip"> <div class="text">test test test test test test test test test</div> </div> </div>

如果你想繼續使用left ，考慮一些負邊距來給元素更多的空間：

 .tooltip { position: absolute; border: 1px solid red; left: 400px; margin-right:-400px; /* Make it bigger enough, at least the same as left */ }.text { max-width: 200px; }

 <div style="border: 1px solid green;width:500px; height: 500px; position:relative"> <div class="tooltip"> <div class="text">test test test test test test test test test</div> </div> </div>