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

Question

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

问题是： Firefox发现该内容（标题+虚线框）太长，并用省略号将其删除。同时，Chrome会做到这一点，并按我需要的方式工作。

屏幕截图：

对于我来说，Chrome似乎工作方式错误，但这对我很有用。并且firefox可以按照逻辑上的方式工作-在内容过长时剪切内容。但是，为什么要在文本的末尾而不是在容器的末尾剪切它（根据MDN，它应该剪掉它）？

也许我使用的是hack，如果您告诉我另一种实现这种视觉效果的方法（例如我在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位）

Firefox版本：51.0.1（32位）

感谢您的帮助。

Answer 1

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

1）我已将内部文本（文章标题）包装到内联块中 <span class='text-block'>

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/

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