Question

我在隐藏的语音气泡中溢出文字时遇到问题：demo

隐藏式讲话泡泡内的文字过度重复文本“隐藏在此处的消息”，我希望它能够被限制在盒子内的区域。

如何更改代码，以便显示所有类型保留在讲话泡泡区域内？

HTML：

<div id="container"><a href="#" class="hoverbubble">Hover over me!<span><p>Hidden message here. Hidden message here. Hidden message here. Hidden message here. Hidden message here.Hidden message here.Hidden message here.</p></span></a></div>

CSS：

#container {
background-color: #FF0;
margin: 200px;
float: left;
height: 200px;
width: 200px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
position: relative;
}
a.hoverbubble {
text-decoration: none;
}
a.hoverbubble span {
display: none;
position: absolute;
left: 3%;
top: 40%;
}
a.hoverbubble:hover span {
display: block;
position: absolute;
padding: .5em;
content: attr(title);
min-width: px;
text-align: center;
width: 180px;
height: 100px;
white-space: nowrap;
top: -125px;
background: rgba(0,0,0,.8);
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
color: #fff;
font-size: 0.86em;
font-family: Arial, Helvetica, sans-serif;
}
a.hoverbubble:hover span:after {
position: absolute;
display: block;
content: "";
border-color: rgba(0,0,0,.8) transparent transparent transparent;
border-style: solid;
border-width: 10px;
height: 0;
width: 0;
position: absolute;
bottom: -20px;
left: 6.1em;
}

Answer 1

您需要从white-space: nowrap

中删除a.hoverbubble span

a.hoverbubble:hover span {
    white-space: nowrap;
}

这可以防止文本在到达容器的范围时进行包装。

隐藏的语音泡沫中溢出的文本

1 个答案: