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

【问题标题】：CSS tooltip - line break at a certain widthCSS 工具提示 - 以特定宽度换行
【发布时间】：2023-04-02 03:36:01
【问题描述】：

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

这是我目前的 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 文件。

【问题讨论】：

将宽度设置为.tooltip:after 并尝试
“我也不能只设置一定的宽度，因为工具提示也可能包含一个短词，然后会太宽。”
并不是说这能解决问题，而是您使用了错误的calc - - 运算符（和+ 同样）必须被空格包围。
这里的问题是::after伪元素是绝对定位的，这样宽度计算方式就变成了shrink-to-fit。虽然 max-width 可能会阻止它超出某个宽度，但我认为如果没有 min-width，您将无法阻止它尽可能地缩小。

标签： css sass

【解决方案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;
}

&lt;p&gt;Test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test &lt;a class="tooltip" title="aaaaa aaaaaa aaaaaaaa aaaaaaaaaa aaaa aaa aaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaa aaaaaaaa"&gt;TEST&lt;/a&gt; test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test&lt;/p&gt;

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

【讨论】：