我正在开发一个经常使用工具提示的网络应用程序。该应用程序的样式使用 Bulma CSS library连同 Bulma Tooltip Extension .我的应用程序中的某些元素具有内部滚动功能(它们的 overflow-y 属性设置为“滚动”或“自动”)。将 overflow-y 设置为“滚动”/“自动”会自动将 overflow-x 设置为“隐藏”(根据其他答案，这是不可避免的)。
这会导致悬垂的工具提示被截断，如在此沙箱中所见:
虽然我知道不可能有可见的 x 溢出和可滚动的 y 溢出，但我想有一些解决方法/解决方案至少允许在滚动中显示悬垂的工具提示的外观-能元素。就我而言，允许 x 轴上的可见悬垂更为重要(没有其他问题/答案可以解决/解决这个确切的问题)。
任何帮助将不胜感激。
#testDiv {
width: 100px;
height: 100px;
border: 1px solid black;
margin: 75px;
overflow-y: auto; /* Delete Line to see full tooltip */
}
.button {
margin: 10px;
}<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css">
<link rel="stylesheet" href="https://wikiki.github.io/css/documentation.css?v=201904261505">
</head>
<body>
<div id="testDiv">
<button class="button tooltip" data-tooltip="This is a Tooltip">X</button>
</div>
</body>
</html>.
最佳答案
您可以创建另一个具有默认溢出设置的 div 元素 (.wrapper)。它将成为您的 #testDiv 和 .button 的容器。
现在，将 position: relative 添加到 .wrapper。
.button 现在可以绝对定位，看起来就像在 #testDiv 元素内，但从技术上讲 - 它不是 :)
#testDiv 元素需要扩展到 100% 宽度和高度，以从 .wrapper 继承大小
最后一步 - 向 #testDiv 添加一些 padding-top 以防止 .button 元素上的内容重叠。
看下面的代码:
.wrapper {
position: relative;
width: 100px;
height: 100px;
margin: 75px;
}
#testDiv {
height: 100%;
width: 100%;
padding-top: 50px;
border: 1px solid black;
overflow-y: auto; /* Delete Line to see full tooltip */
}
.button.tooltip {
margin: 10px;
position: absolute;
top: 0;
right: 0;
}<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css">
<link rel="stylesheet" href="https://wikiki.github.io/css/documentation.css?v=201904261505">
</head>
<body>
<div class="wrapper">
<button class="button tooltip" data-tooltip="This is a Tooltip">X</button>
<div id="testDiv">
content
</div>
</div>
</body>
</html>我希望这个解决方案就足够了:)
关于html - 使元素可滚动会切断内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57392631/