擬似要素のためにFirefoxでエリプシスが正しく機能しない

Question

テキストの後に行を挿入したいが、最大幅（170ピクセル）に達したら省略記号を表示したい。

でも、私はしたくない省略記号を表示するたびに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>