html - 停止工具提示跨度在 CSS 中的每个单词处换行

Question

我已经创建了当某些链接悬停时出现的工具提示。工具提示跨度为 tooltiptext 类，链接使用 ID gloss。

问题是工具提示最终成为其中最长单词的宽度。我试过设置最小宽度，但这是不切实际的，因为一些工具提示只有几个词，而其他的则是整段。如果有一段文本，我不希望所有文本都在同一行，所以 white-space: nowrap 也是不切实际的。

有什么想法吗？

#gloss {
  border-bottom: solid 1pt blue;
  position: relative;
  display: inline-block;
  text-decoration: none;
}

#gloss:hover {
  text-decoration: none;
}

.tooltiptext {
  visibility: hidden;
  text-align:center; background-color:#8899ff;
  color: #000;
  border-radius: 6px;
  box-shadow: 2px 2px 1px #aaa;
  border: 1px solid #000;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: all 0.15s ease;
  pointer-events: none;
}

#gloss:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

<br><br><br><br><br>
<!--<br>s to move the paragraph down-->
<p>This is some text, with a <a href="#" id="gloss">link<span class="tooltiptext">Here is some information about the link.</span></a>. And the text continues.</p>

Answer 1

将 style="width: auto;" 添加到您的 span 标签中它会起作用

<br><br><br><br><br>
<!--<br>s to move the paragraph down-->
<p>This is some text, with a <a href="#" id="gloss">link<span style="width: auto;" class="tooltiptext">Here is some information about the link</span></a>. And the text continues.</p>