我正在制作一个服务器列表网站，对于每个服务器，我想显示一个图像和一些信息，当用鼠标“悬停”图片时将显示这些信息。
当服务器名称太长时，我希望它在悬停时滚动以显示剩余的文本，如果没有在 CSS 中指定长度，我该怎么做？
示例：http: //jsfiddle.net/5EhSx/2
<div class='server'>
<div class='server_info'>
<div align='center' style='margin: 5px; white-space:nowrap; overflow:hidden;'><span class='server_name'>Abc def ghi jkl mno pqr stu vwx yza bcd efg hij klm nop qrs tuv wxy zab cde</span>
</div>
<div style='overflow:hidden; padding: 0 5px;'>
<div style='float:left;'>26 Comments</div>
<div style='float:right;'>17649 Votes</div>
</div>
<div style='overflow:hidden; padding: 0 5px;'>
<div style='float:left;'>Uptime: 99.7%</div>
<div style='float:right;'>73/96 Players</div>
</div>
</div>
</div>
CSS：
.server {
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
height: 170px;
width: 310px;
border: 1px solid grey;
position:relative;
overflow:hidden;
border-bottom-right-radius:7px;
border-bottom-left-radius:7px;
cursor:pointer;
float:left;
border-radius: 7px;
}
.server_info {
color: #FFFFFF;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
width: 100%;
bottom: 0;
border-bottom-right-radius:7px;
border-bottom-left-radius:7px;
height: 25px;
transition: height 0.5s;
-webkit-transition: height 0.5s;
}
.server_name {
position: relative;
left: 0;
transition: left 1s;
-webkit-transition: left 1s;
}
.server:hover .server_info {
height: 60px;
transition: height 0.5s;
-webkit-transition: height 0.5s;
}
.server:hover .server_name {
left: -165px;
transition: left 3s;
-webkit-transition: left 3s;
}