Ellipsis funktioniert nicht korrekt in Firefox für Pseudo-Element

Question

Ich möchte eine Zeile nach einigem Text einfügen, aber sobald es maximale Breite (170px) erreicht, möchte ich Ellipsen zeigen.

aber in firefox jedes Mal zeigt es Ellipsen, die ich nicht will.

Ich möchte gleich in Firefox die Art arbeiten, wie es in Chrom und IE arbeitet.

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

Sie können die Pseudo-Element absolute Position. Ich denke, das Problem ist, dass der Ellipsen-Stil ist Firefox behandelt das Inline-Pseudo-Element als Text und Auslösen der Ellipse, aber es wird dann die Auslassungspunkte an den eigentlichen Text angehängt. Durch Anwenden der absoluten Position auf das Pseudoelement wird dieses Verhalten gestoppt.

UPDATE: Nach dem Lesen darüber ist es eigentlich ein Fehler in Chrom. Firefox interpretiert die Spezifikation für overflow:ellipsis; korrekt.

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>