html - 当我设置溢出时,工具提示的悬停不起作用:为其父级隐藏
问题描述
我想在第一行之后隐藏文本,所以我设置了以下内容:
white-space: nowrap;
text-overflow:ellipsis;
overflow: hidden;
当您将鼠标悬停在文本上方时,整个文本应该在文本上方的工具提示中可见,但是当溢出设置为隐藏时这不起作用。
我在这里有两个类似的代码:
此堆栈片段将隐藏第一行之后的文本,但工具提示将不起作用:
.primary-text {
width: 150px;
margin-top: 100px;
padding: 4px;
font-size: 12px;
position: relative;
display: inline-block;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
border: 1px solid black;
}
/*==========TOOLTIP-TEXT POPUP==========*/
.tooltip {
position: relative;
height: 20px;
}
.tooltip::after {
background-color: white;
border: 1px solid #F2EFEF;
border-radius: 4%;
display: none;
padding: 10px 15px;
position: absolute;
text-align: left;
width: 250px;
white-space: pre-wrap;
word-wrap: break-word;
z-index: 999;
}
.tooltip::before {
background-color: #F2EFEF;
border: 1px solid #F2EFEF;
content: ' ';
display: none;
position: absolute;
width: 15px;
height: 15px;
z-index: 999;
}
.tooltip:hover::after {
display: block;
}
.tooltip:hover::before {
display: block;
}
.tooltip.top::after {
content: "Lorem ipusm sflaklghgdashgisdj fgi siodf ajifjsd josfjodjsfj";
top: 0;
left: 50%;
transform: translate(-50%, calc(-100% - 10px));
}
.tooltip.top::before {
top: 0;
left: 50%;
transform: translate(-50%, calc(-100% - 5px)) rotate(45deg);
}
<div class="primary-text">
<span class="tooltip top">Lorem ipusm sflaklghgdashgisdj fgi siodfajifjsdjosfjodjsfj</span>
</div>
并且此堆栈片段不会隐藏第一行之后的文本,但工具提示将起作用:
.primary-text {
width: 150px;
margin-top: 100px;
padding: 4px;
font-size: 12px;
position: relative;
display: inline-block;
white-space: nowrap;
text-overflow: ellipsis;
border: 1px solid black;
}
/*==========TOOLTIP-TEXT POPUP==========*/
.tooltip {
position: relative;
height: 20px;
}
.tooltip::after {
background-color: white;
border: 1px solid #F2EFEF;
border-radius: 4%;
display: none;
padding: 10px 15px;
position: absolute;
text-align: left;
width: 250px;
white-space: pre-wrap;
word-wrap: break-word;
z-index: 999;
}
.tooltip::before {
background-color: #F2EFEF;
border: 1px solid #F2EFEF;
content: ' ';
display: none;
position: absolute;
width: 15px;
height: 15px;
z-index: 999;
}
.tooltip:hover::after {
display: block;
}
.tooltip:hover::before {
display: block;
}
.tooltip.top::after {
content: "Lorem ipusm sflaklghgdashgisdj fgi siodf ajifjsd josfjodjsfj";
top: 0;
left: 50%;
transform: translate(-50%, calc(-100% - 10px));
}
.tooltip.top::before {
top: 0;
left: 50%;
transform: translate(-50%, calc(-100% - 5px)) rotate(45deg);
}
<div class="primary-text">
<span class="tooltip top">Lorem ipusm sflaklghgdashgisdj fgi siodfajifjsdjosfjodjsfj</span>
</div>
这两个小提琴之间的唯一区别是溢出:隐藏。第一个有,第二个没有。
解决方案
推荐阅读
- c# - 绑定到 UserControl 中的元素
- python - 递归神经网络 ValueError: 找到暗淡为 3 的数组。估计器预期 <= 2
- java - Apache Camel:带有重音字符的文件处理
- c# - Polly:如何结合 TimeoutPolicy 和 RetryPolicy 来请求 Func
- file - ZIP 文件规范加密标头
- c# - 如何首先在 Xamarin.Android 中以编程方式连接到特定的 SSID?
- javascript - 重叠图像预览
- php - Laravel Where 子句搜索不在数据库中的列
- kotlin - 使用 Kotlin 构建具有通用数据类型的类
- microprocessors - 如何将 8085 代码转换为 z80 程序集