使文本溢出省略号在firefox和chrome

Question

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

问题是： Firefox看到，该conent（标题+虚线块）太长，并用省略号剪切它。与此同时，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位）

Firefox版本：51.0.1（32位）

提前感谢您的帮助。

Answer 1

在Firefox中似乎是一些错误或不同的行为。

作为一种解决方法，由于text-overflow: ellipsis仅适用于块元素，因此我将flexbox与文本和点组合在一起，因此文本元素可以包含display: block

body {
  background-color: white;
}

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

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

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

.dots {
  flex: 1;
  border-bottom: 1px dotted #ddd;
}

.overflow-ellipsis > span:first-child {
  text-overflow: ellipsis;
}

<p>
  <span class="left-block overflow-ellipsis"><span>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 overflow-ellipsis"><span>Not so long article name</span><span class='dots'></span></span>
  <span class="right-block">
Unpublished
</span>
</p>

Answer 2

我自己找到了解决方案，只需更改布局即可。由LGSon编写的答案是不够的，因为它打破了IE解决方案的兼容性。 我的方法非常简单，而且到目前为止我还没有找到它。

1）我已将内部文本（文章标题）包装到内联块＆lt; span class =＆＃39; text-block＆＃39;＆gt;

2）添加样式＆＃39; max-width：100％;显示：内联块;＆＃39;和类＃溢出省略号＆＃39;到这个范围

3）删除了课程＆溢出省略号＆＃39;来自外部区块（.left-block）

4）添加了样式＆＃39; white-space：nowrap;溢出：隐藏; display：inline-block;＆＃39;，添加到.left-block的内容，到.text-block

现在一切似乎都有效了！

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

感谢所有试图思考我问题的人：）

Answer 3

div, p{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  -ms-text-overflow: ellipsis;
  -moz-binding: url('ellipsis.xml#ellipsis');
  display: block;
}

<div>
The toppings you may chose for that TV dinner pizza slice when you forgot to shop for foods, the paint you may slap on your face to impress the new boss is your business. But what about your daily bread? Design comps, layouts, wireframes—will your clients accept that you go about things the facile way? Authorities in our business will tell in no uncertain terms that Lorem Ipsum is that huge, huge no no to forswear forever. Not so fast, I'd say, there are some redeeming factors in favor of greeking text, as its use is merely the symptom of a worse problem to take into consideration.
</div>

<p>
There's lot of hate out there for a text that amounts to little more than garbled words in an old language. The villagers are out there with a vengeance to get that Frankenstein, wielding torches and pitchforks, wanting to tar and feather it at the least, running it out of town in shame.
</p>