使用 Scroll 溢出文本但溢出 html 元素

Question

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

我正在尝试使 div 文本可编辑，通常文本会溢出 div 的大小，因此我需要将文本保留在 div 中 overflow:scroll 但我想在 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

问题与.tooltiptext的定位有关。在第一个示例中，具有相对定位的父级在 span 之后关闭。在第二个示例中，缺少结尾的 div。当我将它添加到末尾并更改工具提示的位置时，它工作正常。

#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;
  top: -2em;
  /* 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>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></div>

Answer 2

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

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

Answer 3

你需要一些额外的东西。

这是 CSS 尚未 流行起来 的事情之一。

尽管如此，纯 CSS 仍然是可能的。

所以您希望工具提示出现，但又不希望div水平溢出。您还不想影响任何其他元素。

您可以使用 硬编码 CSS 定位 ，但如果您需要在许多元素上实现您的想法，那将不容易使用。

修复的形式为 Hint.css:

A CSS only tooltip library for your lovely websites

我相信这个库将有助于获得预期的效果，但不会完全像您描述的那样。

这是一个工作示例，说明我如何在保持简洁明了的同时为您描述的元素显示工具提示。

工具提示无论如何都会显示在屏幕底部。它永远不会影响任何其他东西。

[class*="hint--"]:after {
  position: fixed !important;
  width: 200px;
  transform: none !important;
  bottom: 0px;
  left: 0px;
  margin: 0 auto;
  right: 0px;
  text-align: center;
  background: radial-gradient(circle, darkred 30%, #131418)!important;
  border-radius: 100vw 100vw 0 0;
}

#Out {
  background: black;
  color: white;
  width: 200px;
  height: 200px;
  overflow-x: hidden;
  overflow-y: scroll;
}

#Out>span {
  margin: 0 auto;
  padding: 10px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/hint.css/2.4.0/hint.min.css" rel="stylesheet" />

<div id="Out">
  <span contenteditable="true" class="hint--" aria-label="Tool tip text">
Lorem ipsum dolor sit amet, sit no mentitum eleifend. Rebum detracto intellegebat vel ei, pro ne erroribus quaerendum. Malorum nonumes id cum, mei case meliore ut, et enim platonem nec. Eu est option qualisque efficiantur, te errem mucius dolorum nec, putent quaerendum et sea. Ex stet dignissim democritum sed, has te putant ceteros blandit.

Adhuc sanctus intellegat no his, falli viris ei mei, id eum tritani virtute. Iudico audire urbanitas at est, graece antiopam constituam mei eu. Vero animal salutatus nam ea. Essent intellegam cu sea, per legendos suavitate an. Duo sale omittantur definitionem ea, affert quaeque deseruisse ea pro. Vix errem intellegam scripserit eu, sit ex suscipiantur mediocritatem conclusionemque, sonet insolens ex nec.

Velit delenit pri in, ne his nemore torquatos. Ex postea fabulas signiferumque vix, consul postea mea cu, an choro verterem sea. Quod assum vis et. An nam affert quidam. Duo tation patrioque in, ut ludus nihil vel.</span>
</div>

Answer 4

这是我在聊天中 link 分享的最终答案。

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

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

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

.tooltip {
  position: absolute;
  display: none;
  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: 100;
}

.hover-div:hover .tooltip {
  display: block;
  top: -40px;
}

<div class="outContainer">
  <div id="Out" contenteditable="true">
    <div class="hover-div">Hover over me
      <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">Hover over me
      <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

使用 Scroll 溢出文本但溢出 html 元素

Overflow Text with Scroll but overflow html element out of it

html

css

scroll

overflow

tooltip