Html 相对于其容器定位对象？

我正在制作一个服务器列表网站，对于每台服务器，我想显示一张图片和一些信息，当图片被鼠标“悬停”时，这些信息会显示出来

当服务器名称太长时，我希望它在悬停时滚动以显示剩余的文本，如果不在CSS中指定长度，我将如何执行此操作

例如：

---

您可以指定两个属性：

宽度

和

左侧

（如果

位置：绝对

）或

左侧边距

（如果

位置：相对

）的百分比，例如：

宽度：20%；左边距：15%
是的，但是我该怎么做呢？它只会滚动到文本的末尾，如右图：0？但是“右”开始于一个位置alredy，所以它不起作用？对不起，我应该如何相对于它的容器定位它？所以文本“abc def…”会向左滚动，这样你就可以看到结尾了？
<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>

.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;
}