如何按内容设置宽度？

Question

我有一个图标：

在悬停时，会出现一个工具提示：

正如您所看到的问题是它的宽度是父元素，工具提示的宽度是否可能由其内容自动生成？

HTML：

<div class="icon">
    <span class="tooltip">Debian: 20%</span>
    <span class="icon-lin-debian" style="opacity:0.2"></span>
</div>

CSS：

div.icon{
    position:relative;
    display: inline-block;
}

span.tooltip {
    display: none;
    position: absolute;
    line-height: 20px;
    width: 100%;
    left:0;
    right:0;
    padding: 10px;
    font-size: 14px;
    text-align: center;
    background: #000;
    border: 1px solid #353535;
    border-radius: 5px;
    top: -45px;
    z-index: 100;
}

span.tooltip:after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-width: 10px;
    border-style: solid;
    border-color: #353535 transparent transparent transparent;
    top: 40px;
    left: 20px;
    z-index: 100;
}

P.S。 还有其他的话，所以我不能自己设定宽度。

Answer 1

默认情况下，子元素将保留在其父元素中。这是通过包装内容和/或扩展父元素来实现的。

在这种情况下，父元素将展开以包含子元素，因为父元素上没有设置显式宽度。为了使子元素看起来超出父元素，你需要设置父元素的宽度，这样当子元素变得太宽时它就不会扩展，然后你需要设置子元素'宽度要比父母宽。然后，您可以在父元素上指定overflow: visible;以允许子项完全显示，即使它们扩展到父元素之外也是如此。