Question

我在合并段落中的工具提示标签和段落页边距设置时遇到问题。

这是我目前所拥有的：

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 500px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 1px;
  padding: 1px 0;
  
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 50%;
  margin-left: -60px;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

p.ex1 {
  margin-left: 200px; margin-right: 50px;
}

<body style="text-align:center;">
    <font face="Arial" size="4">
        <p class="ex1">
            PARAGRAPH-1 TEST <div class="tooltip">this is a tooltip<span class="tooltiptext"> the tooltip shows this text</span></div> TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST  
        </p>
        <p class="ex1">
            PARAGRAPH-2 TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST 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> 
    </font>
</body>

它显示为3个段落，就像新的段落从工具提示处开始一样。

如何将其显示为两个段落？

Answer 1

我认为，您面临的问题是由于div元素的显示。将div元素替换为span元素。问题就解决了！

我已经编辑了您的代码段。在这里，

.tooltip {
  position: relative;
  display: inline;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 500px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 1px;
  padding: 1px 0;
  
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 50%;
  margin-left: -60px;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

p.ex1 {
  margin-left: 200px; margin-right: 50px;
}

<body style="text-align:center;">
    <font face="Arial" size="4">
        <p class="ex1">
            PARAGRAPH-1 TEST <span class="tooltip">this is a tooltip<span class="tooltiptext"> the tooltip shows this text</span></span> TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST  
        </p>
        <p class="ex1">
            PARAGRAPH-2 TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST 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> 
    </font>
</body>

Answer 2

<p class="ex1" >
    PARAGRAPH-1 TEST
    <span class="tooltip">
        this is a tooltip
        <span class="tooltiptext">
            the tooltip shows this text
        </span>
    </span>
    TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST  
</p>

只需将<div>标记内的<p>更改为跨度，便有2个段落。

如何在段落中组合工具提示标签和段落边距标签？

2 个答案: