为什么Chrome使用省略号剪切文本而Firefox没有？

Question

所以我有一个带有固定宽度容器的简单标记，一个浮动右侧徽章和容器内的文本。我希望文本在到达徽章时用省略号剪切，但它不适用于Firefox。

<div class="container">
   <span class="to-right">toRight</span>
   <span class="left">Cutting text very very long</span>
</div>

Css文件：

.container {
   border: solid 1px silver;
   width: 200px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
}

.to-right {
   float: right;
   background-color: green;
}

为什么以及如何才能使其保持一致？ http://codepen.io/huston007/pen/gPLOaq