текста переполнения многоточие не осуществляется положение: относительная

Question

FIDDLE HERE

У меня есть изображение и ниже меня span с ImageName.

<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> 

Поскольку ImageName может быть слишком длинным, я overflow: ellipsis; на .myImageListEntry.

Теперь я хотел разместить 0pc10px под изображением. Маржа верхом и обивка-топ не работал, так что я использовал это:

.myImageName{ 
    position: relative; 
    top: 10px; 
} 

Текст в пролете помещается 10px от вершины, но три точки (...) не движется вниз.

Как я могу поместить многоточием 10px вниз?

Answer 1

Добавить многоточие в пролете, содержащий текст, а не DIV, который оборачивает изображение и текст

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

.myImageList{ 
 
    max-height: 320px; 
 
} 
 

 
.myImageListEntry{ 
 
    display: block; 
 
    float: left; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
    padding: 5px 5px 5px 5px; 
 
    margin: 5px 5px 5px 5px; 
 
    border: 1px solid rgb(128, 128, 128); 
 
    border-radius: 10px; 
 
    width: 150px; 
 
    height: 150px; 
 
    background-color: rgb(178, 178, 255); 
 
} 
 

 
.myImageListImage{ 
 
    display: block; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    margin-top: auto; 
 
    margin-bottom: auto; 
 
    max-width: 140px; 
 
    max-height: 105px; 
 
    cursor: pointer; 
 
    margin-top: auto !important; 
 
    line-height: 150px; 
 
    vertical-align: middle; 
 
} 
 

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

<div class="myImageList withScrollbars"> 
 
    <div class="myImageListEntry"> 
 
     <img style="width: 140px; height: 105px; margin-top: 17.5px;" src="//www.brukacm.nl/restcontent/uploads/734/349817438DE30553C1AE0D1ECAB91BE48BA0B26D/1/2/42aaaa23401f4cf6a3c0a6cc5f0cd9f0_JPG_thumbn.png" class="myImageListImage"> 
 
     <span class="myImageName">audsfsdfsdfsfsfsdfsdfgsdf43545345to1.JPG</span> 
 
    </div> 
 
    <div class="myImageListEntry"> 
 
    <img style="width: 140px; height: 125.3px; margin-top: 7.35px;" src="//www.brukacm.nl/restcontent/uploads/734/4F237AC78A20570E0E45E2115D1B13E06697F7AF/1/2/93503e0ebd5f4f079a879eb41785b3e3_png_thumbn.png" class="myImageListImage"> 
 
    <span class="myImageName">happyt.png</span> 
 
    </div> 
 
</div>

Answer 2

Я думаю, что это не очень хороший подход, текст затмевает стиль по умолчанию всегда выравнивается с текстом, как он может двигаться вверх.

Используйте этот код.

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

Надеюсь, это поможет. Благодарю.

Answer 3

ОБНОВЛЕНО jsfiddle

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