省略号在第二个跨度中有效，但在第一个跨度中无效答案

【问题标题】：Ellipsis works in second span, but not in first one省略号在第二个跨度中有效，但在第一个跨度中无效
【发布时间】：2015-11-01 20:17:09
【问题描述】：

我遇到了 ellipsis 属性的一些奇怪行为。它适用于一个 span 元素，但不适用于另一个完全相同的 span：

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

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

【问题讨论】：

标签： html css ellipsis

【解决方案1】：

有人知道如何解决这个问题吗？

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

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

删除top: -15;，你会看到盒子模型。

【讨论】：