Search code examples
htmlcssellipsis

Ellipsis works in second span, but not in first one

i´ve encountered some strange behaviour with the ellipsis property. It works perfectly for one span element, but it doesn't work on another, completely identical span:

see this screenshot

How is that even possible? Does anybody know how to fix the problem? Any help is greatly appreciated.

here's my html:

<div class="parent">
  <span class="ellipsis">sadkljasjkfdhkjlhas-qdasfqewrwqe.pdf</span>  
  <div class="icons-right">
    <a href="#"><img src="edit-icon.gif"></a>
    <a href="#"><img src="delete-icon.gif"></a>
  </div>                                                                     
</div> 

<div class="parent">
  <span class="ellipsis">terribly-terribly-long-filename.doc</span>
  <div class="icons-right">
    <a href="#"><img src="edit-icon.gif"></a>
    <a href="#"><img src="delete-icon.gif"></a>
  </div>                                                                      
</div>

and the css:

.parent{
  height: 50px;
  padding-left: 15px;
}

.ellipsis{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-top: 15px;
  display: block;
}

.icons-right{
  position: relative;
  top: -25px;
  float: right;
  width: 62px;
}

*, *::before, *::after {
    box-sizing: border-box;
}

Solution

  • Does anybody know how to fix the problem?

    Add margin-right: 62px; to .ellipsis.

    It is because your float: right; position: relative; top: -15px for .icons-right.

    Remove top: -15; and you will see box model.