基本上，我正在制作一个游戏。
在我的游戏中，我不希望玩家能够互相交谈。你有一个人物，当你说话时，你的文字会出现在你的角色上方的说话气泡 div 中。
我的困境是，当我在气泡中输入太多文本时，气泡会扩展到字符上。所以我希望泡沫向上生长。我一直在尝试想办法在 JS 和 CSS 中做到这一点，但我不得不放弃并询问你们。
这是一个例子：http://jsfiddle.net/tDrNN/ http://jsfiddle.net/tDrNN/
HTML
<div class="wrapper">
<div class="character1" style="position: absolute; top: 124px; left: 392px; width: 36px; height: 36px; background-color: blue;">
<div class="bubble"><span>Hi my name is Mads</span></div>
</div>
<div class="character2" style="position: absolute; top: 124px; left: 192px; width: 36px; height: 36px; background-color: blue;">
<div class="bubble"><span>Hi my name is MadsHi my name is MadsHi my name is MadsHi my name is MadsHi my name is MadsHi my name is Mads</span></div>
</div>
</div>
CSS
.bubble {
position: relative;
background-color:#eee;
margin: 0;
padding:2px;
min-width:100px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-webkit-box-shadow: 0px 0 3px rgba(0,0,0,0.25);
-moz-box-shadow: 0px 0 3px rgba(0,0,0,0.25);
box-shadow: 0px 0 3px rgba(0,0,0,0.25);
top: -80px;
}
.bubble:after {
position: absolute;
display: block;
content: "";
border-color: #eee transparent transparent transparent;
border-style: solid;
border-width: 10px;
height:0;
width:0;
position:absolute;
bottom:-19px;
left:1em;
}
.bubble span {
height: auto !important;
color: #000 !important;
font-family: verdana;
}
这是一个编辑过的小提琴：http://jsfiddle.net/Z8fg3/ http://jsfiddle.net/Z8fg3/
请注意两个主要区别： 类bubble也是绝对定位的（就像字符一样），并且，而不是指定top， 它有一个bottom等于字符的高度（加上箭头和其他东西的一些填充）。
（我移动了其中一个角色，既是为了适应气泡，也是为了表明它无论如何都会粘在气泡上。）
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
