如何抑制 div 悬停弹出窗口中的换行符答案

【问题标题】：How to suppress line break in div hover popup如何抑制 div 悬停弹出窗口中的换行符
【发布时间】：2026-01-13 09:20:02
【问题描述】：

我现在正在学习 HTML，以便为我开发的数据库开发一个帮助系统。我正处于尝试查找代码 sn-ps 来完成我需要并复制和粘贴该代码的阶段。我是在两周前开始的，所以请放轻松——我知道代码可能很乱，我也愿意为此提供任何帮助。

我在一些功能上遇到了一些问题：

在 div 标记前出现了不需要的换行符。
如果我在 div 标记中包含其余文本，文本看起来会有所不同。
我希望弹出窗口将文本向下滑动然后再向上滑动。（这可能吗？）

这是 HTML Help Workshop 的全部内容，因此似乎存在一些限制。

提前感谢您的帮助。

这是我的 HTML：

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<HTML>
<HEAD>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta name="GENERATOR" content="Microsoft&reg; HTML Help Workshop 4.1">
    <Title>Property Detail Report</Title>
</HEAD>
<BODY>
  <h1>Property Detail Report</h1>
  <p>The Property Detail Report displays all data for a given property in one report. This combines key code information, lock inventory information and key inventory information in one concise report.</p>
  <p>This report is access three ways with three different results from the Property Report with three different results:</p>
  <a name="Show All Records"></a> 
  <p><img src="showallbtn.png" alt="Show All Records" Title="Show All Records" border="0"></p>
  <p>The "Show All Records" button will display all records for the current property in one report.</p>
  <a name="Search By Core"></a> 
  <p><img src="searchbycorebtn.png" alt="Search by Core" Title="Search by Core" border="0"></p>
  <p>  The "Search by Core" button allows you to narrow the scope of the records displayed to one core series or one core mark.  This button will bring up a  <a href="#"> <div class="hover-img">dialog <span> <img src="coresearchparameter.png" alt="parameter" /> </span>  </a> asking for the core mark that you wish to search for.  More information can be found in the <a href="propertyrpt.htm"> Property Report Help Topic, </p> </div> 

<OBJECT id=hhctrl type="application/x-oleobject"
        classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11"
        codebase="hhctrl.ocx#Version=6,1,7600,16385"
        width=100
        height=100
>
    <PARAM name="Command" value="Related Topics">
    <PARAM name="Button" value="Text:Related Topics">
    <PARAM name="Item1" value="Property Form Help;propertyfrm.htm">
    <PARAM name="Item2" value="Key Code Report Help;keycoderpt.htm">
    <PARAM name="Item3" value="Property Detail Report Help;propdetailrpt.htm">
    <PARAM name="Item4" value="Search by Core Detail Report Help;#search by core">
    <PARAM name="Item5" value="Search by Building/Structure Detail Report Help;buildingdetailrpt.htm">
    <PARAM name="Item6" value="Key Inventory Report Help;keyinventoryrpt.htm">
</OBJECT>
<OBJECT
   id=sample 
   type="application/x-oleobject" 
   classid="clsid:52a2aaae-085d-4187-97ea-8c30db990436"
>
<PARAM name="Command" value="HH Version">
</OBJECT>

</BODY>
</HTML>

这是我的 CSS：

body {
  font-family: "arial",arial, sans-serif;
}

p {
  font-family: "arial",arial, sans-serif;
}

div {
  font-family: "arial",arial, sans-serif;
} 

a .hover-img { 
  position:relative;
  white-space: nowrap;
 }

a .hover-img span {
  white-space: nowrap;
  position:absolute; left:-9999px; 
  top:-9999px; 
  z-index:9999; 
 }

a:hover .hover-img span { 
  white-space: nowrap;
  top: 20px; 
  left:0;
}

这是我目前的输出：

【问题讨论】：

标签： html css

【解决方案1】：

div 标签应该很容易修复，在 CSS 中添加 display: inline; 到它的部分。这里要学习的一个很好的教训是display 标签是如何工作的，你可以在这里找到很多很好的例子：https://www.w3schools.com/cssref/pr_class_display.asp

据我所知，如果将其包含在 div 中，任何东西看起来都会有所不同的原因是因为 HTML 中的所有 div 都包含在 <a> </a>tags 中。这使它们变成链接，加下划线并使它们变成蓝色。

如果您想将文本向上滑动，我会查看 CSS 过渡和关键帧。也许此线程中的某些内容对您有用：How to play CSS3 transitions in a loop?

【讨论】：