使文本溢出省略号在 Firefox 和 Chrome 中的工作方式类似

我创建了一个布局来显示一些文章标题及其状态。 文章名称框具有固定宽度，我使用 text-overflow:ellipsis 来剪切太长的文章名称。另外，我在文章标题的末尾添加了浅灰色虚线（如果不是太长），以使标题和状态之间的差距看起来更好。

问题是：Firefox 发现内容（标题+虚线块）太长，并用省略号将其剪切。与此同时，Chrome 并没有这样做，而是按照我需要的方式工作。

截图：

对我来说，Chrome 的工作方式似乎是错误的，但它对我很有用。 Firefox 的工作方式正如其逻辑上应有的那样——当内容太长时就将其剪切掉。但是，为什么它在文本的末尾而不是在容器的末尾剪切它（因为它应该，根据MDN)?

也许我正在使用黑客，我不应该，在这种情况下，如果你告诉我另一种实现这种视觉效果的方法，就像我在 Chrome 中那样，我将不胜感激。

最小的例子：

HTML:

<p>
    <span class="left-block overflow-ellipsis">
        Very-very long article name, that would not fit in container
        <span class='dots'></span></span>
    <span class="right-block">
        Published
    </span>
</p>
<p>
    <span class="left-block overflow-ellipsis">
        Not so long article name
        <span class='dots'></span>
    </span>
    <span class="right-block">
        Unpublished
    </span>
</p>

CSS:

body
{
    background-color:white;
}

span.left-block {
    display:inline-block;
    width: 300px;
    border: 1px solid white;

    white-space: nowrap;
    overflow: hidden;
    vertical-align:top;
}

span.left-block:hover
{
    display:inline-block;
    border:1px solid red;
}

span.right-block
{
    display:inline-block;
    vertical-align:top;
}

.dots
{
    display:inline-block;
    border-bottom:1px dotted #ddd;
    width:300px;
}

.overflow-ellipsis {
    text-overflow: ellipsis;
}

JsFiddle 玩：https://jsfiddle.net/ka4scx1h/3/

操作系统：Windows 7 SP1 x64

Chrome版本：57.0.2987.133（64位）

火狐版本：51.0.1（32位）

提前感谢您的帮助。

我自己找到了解决方案，只需更改布局即可。 LGson 编写的答案是不够的，因为它破坏了解决方案的 IE 兼容性。 我的方法很简单，奇怪的是我到现在还没找到。

1）我已将内部文本（文章标题）包装到内联块中

2) 添加样式'max-width:100%;显示：内联块；'并将“overflow-ellipsis”类添加到此跨度

3）从外部块（.left-block）中删除了类“overflow-ellipsis”

4) 添加样式 'white-space: nowrap;溢出：隐藏；显示：inline-block;'，添加到.left-block、.text-block的内容

现在一切似乎都正常了！

body
{
  background-color:white;
}

span.left-block {
  display:inline-block;
  width: 300px;
  border: 1px solid white;
  white-space: nowrap;  
  vertical-align:top;
  overflow: hidden;
}

span.text-block
{
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
  max-width:100%;
  
}

span.left-block:hover
{
  display:inline-block;
  border:1px solid red;
}

span.right-block
{
  display:inline-block;
  vertical-align:top;
}

.dots
{
  display:inline-block;
  border-bottom:1px dotted #ddd;
  width:300px;
}

.overflow-ellipsis {
  text-overflow: ellipsis;
}

<p>
<span class="left-block"><span class='text-block overflow-ellipsis'>Very-very long article name, that would not fit in container</span><span class='dots'></span></span>
<span class="right-block">
Published
</span>
</p>
<p>
<span class="left-block"><span class='text-block overflow-ellipsis'>Not so long article name</span><span class='dots'></span></span>
<span class="right-block">
Unpublished
</span>
</p>

JsFiddle 的结果：https://jsfiddle.net/ka4scx1h/6/

感谢所有尝试思考我的问题的人:)