省略号在第二个范围内工作，但不在第一个范围内

Question

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

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

这是我的HTML：

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

和css：

DATA	
Period	Production
31-Jul-15	15
31-Jul-15	8
31-Jul-15	7
31-Jul-15	9
31-Aug-15	10
31-Aug-15	5
31-Aug-15	12
31-Aug-15	18
	
OUTPUT REQUIRED	
Period	Production
31-Jul-15	15
31-Jul-15	8
31-Jul-15	7
31-Jul-15	9
***Monthly Total	39
	
31-Aug-15	10
31-Aug-15	5
31-Aug-15	12
31-Aug-15	18
***Monthly Total	45

Answer 1

  

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

将<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script> $(document).ready(function(){ $(".changer").click(function(){ if ($(".slidey" + $(this).data("slidey")).hasClass("enter")) { return false } else { $(".slidey").removeClass("exit"); $(".slidey.enter").addClass("exit").removeClass("enter"); $(".slidey" + $(this).data("slidey")).addClass("enter"); $(".changer").removeClass("link_change"); $(".changer" + $(this).data("slidey")).addClass("link_change"); return false; } }); }); </script> 添加到margin-right: 62px;。

这是因为你的.ellipsis代表.icons-right。

删除float: right; position: relative; top: -15px，您会看到框模型。