在HTML工具提示中使用回车符,可以通过使用<br>
标签实现换行。以下是一个简单的示例:
<!DOCTYPE html>
<html>
<head><style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
cursor: help;
}
.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: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
</style>
</head>
<body>
<div class="tooltip">Hover over me
<span class="tooltiptext">这是第一行<br>这是第二行</span>
</div>
</body>
</html>
在这个示例中,我们使用了CSS样式创建了一个简单的工具提示,并在<span>
标签中使用了<br>
标签实现了换行。当鼠标悬停在“Hover over me”文本上时,工具提示将显示两行文本。
领取专属 10元无门槛券
手把手带您无忧上云