在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：https://jsfiddle.net/ka4scx1h/3/

OS：Windows 7的SP1 64位

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一起玩Google Chrome版本57.0.2987.133（64位）

火狐版本：51.0.1（32位）

感謝您的幫助提前。

Answer 1

I」通過改變佈局，我自己找到了解決方案。由LGSon編寫的答案是不夠的，因爲它破壞了IE解決方案的兼容性。 我的方法很簡單，直到現在我才發現它很奇怪。

1）我包裹內部文本（文章標題）到一個內聯塊<跨度類=「文本塊」 >

2）添加風格「最大寬度：100％;顯示：內聯塊;」和類 '溢出-省略號' 到這個跨度

3）中移除類從外部塊（。左塊 '溢出-省略號'）

4）添加樣式「空白：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/

感謝所有誰試圖想對我的問題:)

Answer 2

似乎是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>