省略号适用于第二个跨度，但不适用于第一个跨度

Question

我遇到了一些关于省略号的奇怪行为属性。它适用于一个跨度元素，但不适用于另一个完全相同的跨度：

这怎么可能？有人知道如何解决这个问题吗？非常感谢任何帮助。

这是我的 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>

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

Answer 1

Does anybody know how to fix the problem?

将 margin-right: 62px; 添加到 .ellipsis。

这是因为您的 float: right; position: relative; top: -15px .icons-right.

去掉top: -15;你会看到盒子模型。

省略号适用于第二个跨度，但不适用于第一个跨度

Ellipsis works in second span, but not in first one

html

css

ellipsis