9

我有一个容器 div 元素overflow:hidden。不幸的是,由于该网站的制作方式,该属性是必需的。

在这个 div 里面是所有的网站内容,包括一些工具提示。当您将鼠标悬停在链接或其他东西上时,这些工具提示会与 jQuery 一起显示。

问题是这些工具提示中的一些将显示为部分隐藏,因为上面溢出的东西,因为它们位于容器 div 之外......

有什么方法可以显示这个容器内的特定元素,即使它超出了它的边界?也许是一个javascript解决方案?

html 看起来像这样:

<div style="overflow:hidden; position:relative;">

  the main content

  <div style="position:absolute;left:-100px;top:-50px;"> the tooltip thing </div>

</div>
4

3 回答 3

11

尝试这个:

<div style="position:relative;">    
  <div style="overflow:hidden; position: relative; width: {any}; height: {any};">the main content<div>    
  <div style="position:absolute;left:-100px;top:-50px;"> the tooltip thing </div>    
</div>

只需将您的主要内容放在主 div 内的另一个 div 中,并提供提供的 css 以在溢出时隐藏内容...

于 2010-08-28T14:38:04.747 回答
0

CSS 就像一个盒子,有时,你有元素“流出”。对主要元素的设置overflow: hidden隐藏了从该框流出的内容。

考虑以下:

HTML

<div class="box">This box has a height and a width. This means that if there is too much content to be displayed within the assigned height, there will be an overflow situation. If overflow is set to hidden then any overflow will not be visible.</div>

<p>This content is outside of the box.</p>

CSS

.box {
border: 1px solid #333333;
width: 200px;
height: 100px;
overflow: hidden;
}`

这将输出以下内容:
在此处输入图像描述

请注意,其余溢出的文本是隐藏的。

于 2021-08-14T08:50:40.967 回答
-1

如果 overflow:hidden 要包含浮点数,那么还有其他方法可以让工具提示不被切断。看看敌人 clearfix:after

于 2010-08-28T13:42:28.290 回答