絕對定位的元素調整大小以適合文本

Question

我正在嘗試制作一個工具提示，在懸停或選擇關鍵字時顯示額外信息。 我正在努力的部分是獲得一個絕對定位的元素來以一種很好的方式重排文本。

使用空格：nowrap； 適用於少量文本，但對大量文本無用。 我想出的最佳解決方案是將工具提示的容器包裝在一個額外的容器中，該容器的寬度是我希望工具提示的最大寬度。 當關鍵字位於屏幕左側且容器未觸及屏幕右側時，此方法非常有用，但當關鍵字與屏幕右側足夠接近時，容器會通過屏幕邊緣出現水平滾動條。

有沒有人對如何讓一個絕對定位的元素在文本周圍調整大小有任何建議，以便在沒有額外空間的情況下完全包含少量文本，但一旦達到一定寬度仍然允許大量文本重排？

 a.tooltip { position: relative; } a.tooltip >div { position: absolute; display: none; width: 350px; } a.tooltip >div >div { display: inline-block; border: 1px solid red; border-radius: 5px; padding 5px; } a.tooltip:focus >div, a.tooltip:hover >div { display: inline-block; }

 <div style="display: inline-block; width: 400px;"> <a href="javascript:void(0)" class="tooltip"> House <div> <div> A self-contained dwelling structurally independent from other dwellings and intended for long-term residential use. To be self-contained the suite of rooms must possess cooking and bathing facilities as building fixtures. </div> </div> </a> </div> <a href="javascript:void(0)" class="tooltip"> Keyword <div> <div> Not much text </div> </div> </a>

Answer 1

負margin-right結合max-width可以在這里解決問題。 您也可以只保留一個包裝器：

 a.tooltip { position: relative; } a.tooltip >div { position: absolute; display: none; max-width: 350px; margin-right: -350px; border: 1px solid red; border-radius: 5px; padding 5px; } a.tooltip:focus >div, a.tooltip:hover >div { display: inline-block; }

 <div style="display: inline-block; width: 400px;"> <a href="javascript:void(0)" class="tooltip"> House <div> A self-contained dwelling structurally independent from other dwellings and intended for long-term residential use. To be self-contained the suite of rooms must possess cooking and bathing facilities as building fixtures. </div> </a> </div> <a href="javascript:void(0)" class="tooltip"> Keyword <div> Not much text </div> </a>