代码之家 › 专栏 › 技术社区 › peter Schiza

绝对位置元素的宽度[闭合]

css html javascript

-1

peter Schiza · 技术社区 · 5 年前

.tooltip )还有另一个部门( .text )里面有文字 max-width left 财产 。工具提示 它的宽度会缩小(我猜是因为 right 属性为0)。我想要的是 。工具提示 尊重宽度 .文本 (它的内容)首先。我尝试过:

设置宽度 tooltip 到 fit-content -这基本上是我想要实现的(在代码片段中显示),但它在IE上不起作用(我必须支持)。没有这个宽度会缩水。
设置固定宽度 工具提示 text -也不可能,因为文本 div可以很短,然后会有空的空间。
另一方面,文本可能很长,所以我无法设置 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>

0 回复 | 直到 5 年前

Temani Afif 5 年前

在思想上是要取代的 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>

如果你想继续使用 ,考虑一些负边距以给元素更多的空间:

.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纯绿色;宽度:500px;高度:500px;位置:相对“>
<div class=“工具提示”>
<div class=“text”>测试测试</div>
</div>
</div>

推荐文章

Softly · 单选按钮未按预期取值

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Thirumal isireddy · 在导航栏顺风css中,img被扭曲,而不是将元素推到旁边

1 年前

eXor420 · 如何在脚本标记中使用导出的函数?

1 年前

Hadi · 如何在无效和有效输入中选择用于更改样式的psoudo元素(after)

1 年前

IonicMan · 剑道网格在宽度过大时不显示某些列

1 年前

Kernier · 如何将数学公式支持添加到StacksEditor?

1 年前

Md. Ibrahim · CSS网格项溢出小屏幕滚动

1 年前

Arjun V Srivatsa · 如何将系统时区信息分配给javascript中的变量?

1 年前

Akshay mek · Vscode扩展建议不适用于某些文件夹

1 年前