ellipsis débordement Texte non effectuée par position: relative

Question

FIDDLE HERE

je une image et au-dessous, j'ai un span avec le 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> 

Parce que le imagename peut être trop long, je overflow: ellipsis; sur le .myImageListEntry.

Maintenant, je voulais placer le span 10px ci-dessous l'image. margin-top et padding-top ne fonctionnait pas, donc j'utilisé ceci:

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

Le texte en l'espace est placé 10px du haut, mais les trois points (...) ne sont pas déplacer vers le bas.

Comment puis-je placer le 10px points de suspension vers le bas?

Answer 1

Ajouter des points de suspension à l'étendue contenant le texte et non la div qui enveloppe l'image et le texte

.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

Je pense que ce n'est pas une bonne approche, le style par défaut du texte éclipse est toujours aligné avec le texte, comment peut-il se déplacer vers le haut.

Veuillez utiliser ce code.

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

Espérons que cela puisse aider. Merci.

Answer 3

MISE À JOUR jsfiddle

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