gpt4 book ai didi

css - 跨度溢出时工具提示箭头消失-y : auto

转载 作者:行者123 更新时间:2023-11-28 10:04:42 26 4
gpt4 key购买 nike

我有一个基于跨度的工具提示,它将加载一些内容。内容可能有不同的大小,所以我为跨度设置了最大高度和最大宽度,并希望它能够在内容超过此尺寸时滚动。

问题是每当我设置overflow:scroll; 时箭头就会消失。有解决这个问题的方法吗?

代码如下:

#tooltip {
position: absolute;
max-height: 300px;
max-width:300px;
line-height: 20px;
overflow: scroll; /*adding this makes the arrow disappear*/
padding: 10px;
font-size: 14px;
text-align: left;
color: #fff;
background: #2e31b1;
border: 4px solid #2e31b1;
border-radius: 5px;
text-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 1px;
box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 2px 0px;
}

#tooltip:after {
content: '';
position: absolute;
width: 0;
height: 0;
border-width: 10px;
border-style: solid;
border-color: transparent #2e31b1 transparent transparent;
top: 10px;
left: -24px;
}

工具提示将包含如下内容:

<span id="tooltip">
<div> some info</div>
<div> some info</div>
<div> some info</div>
<div> some longer than max-width info</div>
//more than max-height pixels worth of divs
<div> some info</div>
</span>

最佳答案

我不确定这是最干净的解决方案,但您可以像这样用另一个 div 包装您的内容:

HTML

<div id="tooltip">
<div id="content">
<div> some info</div>
<div> some info</div>
<div> some info</div>
<div> some longer than max-width info</div>
<div> some info</div>
<div> some info</div>
<div> some info</div>
</div>
</div>

CSS

#tooltip {
position: absolute;
}
#content {
font-size: 14px;
color: #fff;
max-height: 100px;
max-width:300px;
line-height: 20px;
overflow: scroll;
background: #2e31b1;
padding: 10px;
border: 4px solid #2e31b1;
border-radius: 5px;
text-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 1px;
box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 2px
}
#tooltip:after {
content: '';
position: absolute;
width: 5px;
height: 0;
border-width: 10px;
border-style: solid;
border-color: transparent #2e31b1 transparent transparent;
z-index:999;
top: 10px;
left: -24px;
}

Jsbin: http://jsbin.com/ukaxof/1/edit

关于css - 跨度溢出时工具提示箭头消失-y : auto,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14861610/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com