工具提示 CSS：删除新行答案

【问题标题】：Tooltip CSS: Remove new line工具提示 CSS：删除新行
【发布时间】：2016-06-23 17:47:59
【问题描述】：

我正在关注本教程：http://www.w3schools.com/css/tryit.asp?filename=trycss_tooltip_transition

但我想在“当您将鼠标移到下面的文本上时，工具提示文本将淡入并需要 1 秒钟从完全不可见变为可见”旁边获得“悬停在我身上”文本。

例如，理想的输出是：

当您将鼠标移到下面的文本上时，工具提示文本将淡入并花 1 秒时间从完全不可见变为可见。 将鼠标悬停在我身上

而不是

当您将鼠标移到下面的文本上时，工具提示文本将淡入并用 1 秒时间从完全不可见变为可见。

将鼠标悬停在我身上

工具提示显然仍应在悬停时显示。我必须更改 CSS 的哪一部分？

<!DOCTYPE html>
<html>
<style>
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 100%;
    left: 50%;
    margin-left: -60px;
    
    /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
    opacity: 0;
    transition: opacity 1s;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}
</style>
<body style="text-align:center;">

<h2>Fade In Tooltip on Hover</h2>
<p>When you move the mouse over the text below, the tooltip text will fade in and take 1 second to go from completely invisible to visible.</p>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

</body>
</html>

【问题讨论】：

标签： javascript html css

【解决方案1】：

稍微改变结构怎么样，将Hover over me 文本放入<span> 而不是<div>，然后将其放入<p> 标记中，如下所示：

<body style="text-align:center;">
<h2>Fade In Tooltip on Hover</h2>
<p>When you move the mouse over the text below, the tooltip text will fade in and take 1 second to go from completely invisible to visible. <span class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</span></p>
</body>

这是一个 JS Fiddle 显示它

让我再解释一下：在 HTML 中，<p> 标记是 block 元素，因此它不能在其中包含其他 block 元素（例如 <div>）。 <span> 标签不是block，而是inline，允许您将它放在<p> 标签的旁边。很多时候，当我们想要编辑 <p> 标签内的文本时，我们会使用 <span> 标签，因为它不会将 <span> 标签中的文本分成一个新行，比如 <div> 或第二个 @987654339 @ 标记会做（正如您在示例中看到的那样。

【讨论】：

【解决方案2】：

之所以出现在两行，是因为包含指令的段落标签是块级元素。这意味着它将开始和结束一个新行。您可以将此元素在 CSS 中的显示设置为内联，它应该将文本显示为内联。

p{
    display: inline;
}

【讨论】：