使 text-overflow 省略号在 firefox 和 chrome 中的工作相似

Question

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

问题是： 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/

OS: 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) 我已经将内部文本（文章标题）包装成 inline-block

2) 添加样式 'max-width:100%; display:inline-block;' 和 class 'overflow-ellipsis' 到此 span

3) 从外部块 (.left-block)

中删除了 class 'overflow-ellipsis'

4) 添加样式 'white-space: nowrap; overflow: hidden; display: 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/

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

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>

使 text-overflow 省略号在 firefox 和 chrome 中的工作相似

Make text-overflow ellipsis work similary in firefox and chrome

html

css

firefox

google-chrome

ellipsis