3

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

问题是每当我设置时箭头就会消失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>
4

1 回答 1

2

我不确定这是最干净的解决方案，但你可以用另一个 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

于 2013-02-13T20:31:57.610 回答