Html 文本溢出省略号不受位置影响：相对

我有一张图片，下面有一张带有imagename的

span

<div class="myImageList  withScrollbars">
    <div class="myImageListEntry">
        <img style="width: 140px; height: 105px; margin-top: 17.5px;" src="..._thumbn.png" class="myImageListImage">
        <span class="myImageName">audsfsdfsdfsfsfsdfsdfgsdf43545345to1.JPG</span>
    </div>
</div>

span中的文本距离顶部10px，但三个点（

…

）没有向下移动

---

如何将省略号10px向下放置？

我认为这不是一个好方法，文本eclips默认样式始终与文本对齐。如何将其移到顶部

请使用此代码

.myImageName {
    display: inline-block;
    height: 22px;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 154px;
}

希望这能有所帮助。谢谢。

更新

---

将省略号添加到包含文本的范围，而不是包装图像和文本的div

.myImageName {
    position: relative;
    top: 10px;
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
    overflow: hidden;
}

.myImageList{
最大高度：320px；
}
.myImageListEntry{
显示：块；
浮动：左；
溢出：隐藏；
文本溢出：省略号；
空白：nowrap；
填充物：5px 5px 5px；
保证金：5px 5px 5px 5px；
边框：1px实心rgb（128128128）；
边界半径：10px；
宽度：150px；
高度：150像素；
背景色：rgb（178178255）；
}
.myImageListImage{
显示：块；
左边距：自动；
右边距：自动；
页边顶部：自动；
页边距底部：自动；
最大宽度：140像素；
最大高度：105px；
光标：指针；
页边顶部：自动！重要；
线高：150px；
垂直对齐：中间对齐；
}
.myImageName{
位置：相对位置；
顶部：10px；
宽度：100%；
空白：nowrap；
文本溢出：省略号；
显示：块；
溢出：隐藏；
}

audsfsdffsdfgsdf43545345345to1.JPG
happyt.png

检查我的JSFIDLE我想这是你想要的。这导致了文字底部的点向下移动了一点，但不是全部

.myImageName{
  position: relative;
  top: 6px;
  vertical-align: super;
}

.myImageName {
    position: relative;
    top: 10px;
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
    overflow: hidden;
}