绝对定位元素的宽度

debugcn 发表于 Dev

彼得·西扎

我已经将div元素（.tooltip）和另一个div（.text）放在其中（带有已max-width设置的文本）中。当的left属性.tooltip足够大时，其宽度会缩小（我猜是因为right属性的默认值为0）。我想要的是首先要.tooltip尊重.text（它的内容）的宽度。我试过的

设置的宽度tooltip来fit-content-这基本上就是我想要实现（表明上即可），但它不能在IE工作（这我要支持）。没有这种宽度，宽度.tooltip会缩小。
tooltip或将固定宽度设置为text-也是不可能的，因为textdiv中的文本可能很短，然后会有空白。
另一方面，文本可能真的很长，所以我不能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>

陪同Afif

想法是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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。