省略號在僞元素中的火狐中無法正常工作

Question

我想在某些文本後插入一行，但一旦達到最大寬度（170px），我想顯示省略號。

但在Firefox每次它顯示我不想要的省略號。

我想在firefox中使用它在Chrome和IE中的工作方式。

div { 
 
    max-width: 170px; 
 
    background-color: #c7bdbd; 
 
} 
 

 
h1 { 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
} 
 

 
h1:after { 
 
    content: ''; 
 
    display: inline-block; 
 
    width: 100%; 
 
    height: 100%; 
 
    margin-right: -100%; 
 
    border-bottom: 1px solid #000; 
 
}

<div> 
 
    <h1>Title</h1> 
 
    <h1>Longer Title</h1> 
 
</div>

Answer 1

您可以絕對位置的僞元素。我認爲問題在於，省略號樣式是firefox將內聯僞元素當作文本並觸發省略號，然後將省略號附加到實際文本中。對僞元素應用絕對位置將停止這種行爲。

更新：進一步閱讀後，它實際上是一個鉻中的錯誤。 Firefox正確解釋overflow:ellipsis;的規範。

https://bugzilla.mozilla.org/show_bug.cgi?id=1346436

div { 
 
    max-width: 170px; 
 
    background-color: #c7bdbd; 
 
} 
 

 
h1 { 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
    position:relative; 
 
} 
 

 
h1:after { 
 
    content: ''; 
 
    width: 100%; 
 
    height: 100%; 
 
    border-bottom: 1px solid #000; 
 
    position:absolute; 
 
    bottom:8px; 
 
}

<div> 
 
    <h1>Title</h1> 
 
    <h1>Longer Title</h1> 
 
</div>