0

我有一个 CSS 工具提示，它只会破坏每个单词。相反，我希望它仅在即将超过某个宽度时才打破一个词，但我不知道该怎么做。我也不能只设置一定的宽度，因为工具提示也可能包含一个短词，然后会太宽。

http://jsfiddle.net/o9s4dy0t/7/

这是我目前的 CSS 代码：

.tooltip {
    display: inline;
    position: relative;
}



.tooltip:after {
    background: #111;
    background: rgba(0,0,0,.8);
    border-radius: .5em;
    bottom: 1.35em;
    color: #fff;
    content: attr(title);
    display: block;
    padding: .3em 1em;
    position: absolute;
    text-shadow: 0 1px 0 #000;
    max-width:calc(100vw-(100vw/2));
    right:0;
    z-index: 98;
}

.tooltip:before {
    border: solid;
    border-color: #111 transparent;
    border-color: rgba(0,0,0,.8) transparent;
    border-width: .4em .4em 0 .4em;
    bottom: 1em;
    content: "";
    display: block;
    left: 0;
    position: absolute;
    z-index: 99;
}

顺便说一句，我正在使用 .scss 文件。

4

1 回答 1

1

您需要将 :after 元素的显示设置为 table 或 inline-table 以便宽度计算可以根据需要进行。

.tooltip {
    display: inline;
    position: relative;
}



.tooltip:after {
    background: #111;
    background: rgba(0,0,0,.8);
    border-radius: .5em;
    bottom: 1.35em;
    color: #fff;
    content: attr(title);
    display: table;
    padding: .3em 1em;
    position: absolute;
    text-shadow: 0 1px 0 #000;
    max-width:calc(100vw - (100vw/2));
    right:0;
    z-index: 98;
}

.tooltip:before {
    border: solid;
    border-color: #111 transparent;
    border-color: rgba(0,0,0,.8) transparent;
    border-width: .4em .4em 0 .4em;
    bottom: 1em;
    content: "";
    display: block;
    left: 0;
    position: absolute;
    z-index: 99;
}
<p>Test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test <a class="tooltip" title="aaaaa aaaaaa aaaaaaaa aaaaaaaaaa aaaa aaa aaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaa aaaaaaaa">TEST</a> test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test</p>

PS：虽然我不得不问你为什么要尝试实现自己的工具提示；这是一个很好的练习，但另外考虑一些第三方选项。

于 2018-07-24T11:46:18.357 回答