Question

我已经看过各种各样的解决方案，似乎无法发挥作用。我希望我能错过一些简单的东西。我想要的是工具提示宽度只使用所需的，然后在达到最大宽度时换行。

这是我的CSS：

<style>
    .tooltip {
        position: relative;
        display: inline-block;
        width: 20px;
        height: 20px;
        background-color: steelblue;
        color: yellow;
        border: solid;
        border-width: 1px;
        border-radius: 50%;
        text-align: center;
        cursor: help;
    }
        .tooltip:before {
            content: '?';
        }

        .tooltip .tooltiptext {
            visibility: hidden;
            position: absolute;
            display: inline-block;
            max-width: 300px;
            background-color: black;
            color: #fff;
            text-align: left;
            border-radius: 6px;
            z-index: 10;
        }

        .tooltip:hover .tooltiptext {
            visibility: visible;
        }
</style>

这是我的HTML：

<div class="tooltip">
    <div class="tooltiptext">
        I want this to wrap only after 300 pixels.
    </div>
</div>
Blacklist

它发生的事情总是包装只适合最宽的单词，使得最大宽度设置毫无意义。任何帮助将不胜感激。

Answer 1

问题是你试图将工具提示塞进一个宽度为20px的容器中。它根本没有任何摆动空间！

要获得解决方案，请将.tooltiptext移出.tooltip。 CSS大部分都可以保持不变。

   .tooltip {
        position: relative;
        display: inline-block;
        width: 20px;
        height: 20px;
        background-color: steelblue;
        color: yellow;
        border: solid;
        border-width: 1px;
        border-radius: 50%;
        text-align: center;
        cursor: help;
        overflow:visible;
    }
        .tooltip:before {
            content: '?';
        }

        .tooltip + .tooltiptext {
            visibility: hidden;
            position: absolute;
            display: inline-block;
            max-width: 300px;
            background-color: black;
            color: #fff;
            text-align: left;
            border-radius: 6px;
            z-index: 10;
        }

        .tooltip:hover + .tooltiptext {
            visibility: visible;
        }

<div class="tooltip">
</div>
<div class="tooltiptext">
  I want this to wrap only after 300 pixels.
</div>
Blacklist

Answer 2

您还需要明确设置最小宽度：

.tooltip .tooltiptext {
        visibility: hidden;
        position: absolute;
        display: inline-block;
        min-width: 100px;
        max-width: 300px;
        background-color: black;
        color: #fff;
        text-align: left;
        border-radius: 6px;
        z-index: 10;
    }

https://jsfiddle.net/gdL458jo/

麻烦使用CSS获取工具提示宽度正确

2 个答案: