我正在使用一个工具提示,这是用来显示两个文本,这是:
预期结果如下所示:
我试过使用下面的css
.tooltip {
display: none;
align-items: center;
justify-content: center;
min-width: rem(80px);
padding: rem(8px) rem(16px);
border-radius: rem(4px);
background: var(--white);
color: var(--gray-900);
position: absolute;
bottom: calc(100% + 10px);
left: 50%;
transform: translateX(-50%);
&::before {
content: '';
display: block;
width: 0;
height: 0;
border-left: rem(5px) solid transparent;
border-right: rem(5px) solid transparent;
border-top: rem(5px) solid var(--white);
position: absolute;
bottom: -5px;
left: 50%;
transform: translateX(-50%);
}
}
这就是我得到的
需要帮助:设置一个min-width和max-width,让容器在这个范围内展开。
min-width: max-content
或
white-space: nowrap