html - 如何按内容设置宽度？

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;
}

PS
还有别的说法，所以我不能自己设置宽度。

Answer 1

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

在这种情况下，父元素扩展为包含子元素，因为父元素上没有明确设置宽度。为了让子元素看起来超出父元素，您需要设置父元素的宽度，以便在子元素太宽时不会扩展，然后您需要设置子元素'宽度比他们父母的宽。然后，您可以overflow: visible;在父元素上指定以允许子元素完全显示，即使它们延伸到父元素之外。