css3有气泡提示吗 |css3 文字显示两行

/* CSS代码实现气泡提示 */
.tooltip {
position: relative;
display: inline-block;
cursor: pointer;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}

以上是一个简单的CSS代码实现气泡提示的方法。大家可以给需要加上提示的元素添加一个class，例如.tooltip。然后在与该元素相邻的位置添加一个.tooltiptext元素，它将被用作气泡提示的内容。接下来，大家可以在CSS中对它们进行样式设置。其中，position: relative;可以让气泡提示相对于.tooltip元素进行定位；visibility: hidden;则是使提示内容在初始状态下不可见。

当鼠标悬停在.tooltip元素上时，.tooltiptext元素将变得可见。这是通过给.tooltip:hover .tooltiptext添加样式实现的。在这里，大家使用了opacity属性来实现精美的淡入效果。

总的来说，CSS3提供了丰富的样式设置和动画效果，使得气泡提示这种实用的效果也可以变得美观而有趣。