CSS 工具提示 - 以特定宽度换行

Question

我有一个 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 文件。

Answer 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:虽然我不得不问你为什么要尝试实现自己的工具提示；这是一个很好的练习，但除此之外请考虑一些第三方选项。