html - 调整宽度内的内容
问题描述
我创建了一个工具提示,它显示的数据正在溢出。所以想要将内容放在工具提示的宽度内。它更多的是悬停时的徽章,我需要显示内容,我们也可以有 500px 的最大宽度和高度没有限制。您还可以看到,在悬停时,工具提示并没有完全落在它悬停的相应项目上。这是我尝试过的,下面是我的代码
.lightgrey-badge {
width: auto;
height: 20px;
padding: 0px 8px 0px 8px;
border-radius: 4px;
background-color: #f2f2f2;
}
.lightgrey-badge-text {
font-size: 12px;
font-weight: 600;
text-align: center;
color: #595959;
vertical-align: middle;
}
.border {
border-radius: 20px;
border: solid 2px #595959;
}
.lightgrey-badge-text-elipses {
display: inline-block;
max-width: 40px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tooltiptext {
visibility: hidden;
max-width: 250px;
height: 50px;
opacity: 0.6;
box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.04);
background-color: #000000;
color: #ffffff;
text-align: center;
border-radius: 6px;
position: absolute;
z-index: 9999;
margin-top: 28px;
margin-left: -150px;
}
.tooltiptext::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}
.lightgrey-badge:hover .tooltiptext {
visibility: visible;
}
<span
class="lightgrey-badge border"
style="margin-right: 5px"
>
<span
class="lightgrey-badge-text lightgrey-badge-text-elipses"
>Element
<span class="tooltiptext">
<span style="width: fit-content"> this s the dummy data the orifinal will look something like this a big long test.i have created a tooltip the data its showing is getting overflowed. so want to fit the content inside the width of the tooltip</span></span
>
</span>
</span>
解决方案
试试这个代码它会帮助你
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
display: block;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
<!DOCTYPE html>
<html>
<body style="text-align:center;">
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
<br><br>
<div class="tooltip">Hover over me Hover over me
<span class="tooltiptext">blah bla blaa a bal blak a ba b alj ang</span>
</div>
<br><br>
<div class="tooltip">Hover over me Hover over me 3
<span class="tooltiptext">askdjf ksfjlskd flsaa flsjdlfj sdfk sadkjflskd af sdkjf lsdkf sdljf</span>
</div>
</body>
</html>
验证我的答案是否适合您
推荐阅读
- java - Collator - Android 和 Windows 中针对相同美国语言环境的不同排序规则
- python - python logging - “root”dict键有什么作用?
- extjs - ExtJs 在不同的浏览器上表现不同
- javascript - jQuery 删除/添加类只工作一次
- list - 在生成的数字在列表中时生成随机数 - ansible
- mysql - 在 EntityFrameworkCore 中加载相关数据时出错
- php - 如何检测此 CREATE TABLE SQL 括号之间的代码行?
- python - 嵌套字典 python 中的购物车总价
- python-3.x - LDAP 用户信息
- android - Ionic 在 android Connection Refused 上运行失败