html - 使用滚动溢出文本但从中溢出 html 元素

Question

我的英语不是最好的，但我希望能写出问题可以理解。

我正在尝试使 div 文本可编辑，通常文本会溢出 div 的大小，因此我需要使用 overflow:scroll 将文本保留在 div 中，但我想接受该 div 中的 html 元素，尤其是工具提示。这个 html 元素(工具提示)通常会超出 div，但如果我使用 overflow:scroll 来管理文本，我将失去让工具提示溢出的属性。这是一张说明发生了什么的图片:

codepen 的代码如图片所示:https://codepen.io/anon/pen/jwXGRE?editors=1100

#Out {
  background: black;
  color: white;
  width: 200px;
  height: 200px;
  margin-top: 30px;
  overflow: scroll;
}

#noOut {
  background: black;
  color: white;
  width: 200px;
  height: 200px;
  margin-top: 30px;
}

body {
  background: red;
}

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
  /* If you want dots under the hoverable text */
}


/* Tooltip text */

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
}


/* Show the tooltip text when you mouse over the tooltip container */

.tooltip:hover .tooltiptext {
  visibility: visible;
}

.tooltip .tooltiptext {
  width: 120px;
  bottom: 100%;
  left: 50%;
  margin-left: -60px;
  /* Use half of the width (120/2 = 60), to center the tooltip */
}

<div id="Out" contenteditable="true">
  <div class="tooltip">Hover over me
    <span class="tooltiptext">Tooltip text</span>
  </div>div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1
  div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1</div>

<div id="noOut" contenteditable="true">
  <div class="tooltip">Hover over me
    <span class="tooltiptext">Tooltip text</span></div>div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2
    div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2</div>`

总而言之，我需要让工具提示溢出而不是文本。

再次抱歉我的英语不好，我会很感激任何提示或帮助:)。

Answer 1

更新:这是您的解决方案:

body {
  background: pink;
  padding: 20px;
  font-family: arial;
}

.outContainer {
  position: relative;
}

#Out {
  background: #333;
  line-height: 22px;
  color: white;
  width: 300px;
  height: 200px;
  margin-top: 30px;
  overflow: scroll;
  padding: 10px;
}

.hover-div {
  cursor: pointer;
  background: white;
  color: #333;
  margin: 8px 0px;
}

.tooltip {
  position: absolute;
  display: none;
  top: -40px;
  left: 0px;
  border-bottom: 1px dotted black;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  z-index: 1;
}

.hover-div:hover .tooltip {
  display: block;
}

<div class="outContainer">
  <div id="Out" contenteditable="true">
    <div class="hover-div">1- Hover Over here
      <div class="tooltip">Tooltip text</div>
    </div>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
    <div class="hover-div">2- Hover Over again
      <div class="tooltip">Tooltip text</div>
    </div>
    Additional text goes here It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
  </div>
</div>

码笔:https://codepen.io/Omi236/pen/KqbQoO?editors=1100