Text overflow ellipsis not showing with some custom font

Question

I\'m currently trying to make a text box with hiding overflowing text. It works fine, but for some part. I\'m using

text-overflow: ellipsis;

<

Answer 1

http://jsfiddle.net/cbppL/707/

HTML

Long text is so long oh my is long indeed

CSS

header {
border:1px solid red;
width:150px;
position:relative;
}

h1 {
   overflow:hidden;
    white-space:nowrap;
   /* -ms-text-overflow:ellipsis; */
    /* text-overflow:ellipsis; */
    width:150px;
    height:1.2em;
}
header:after{
    content:"...";
    position:absolute;
    top:0;
    right:0;
    background:#fff;
}
h1:hover {
    overflow:visible;
}

Not a very good solution. It will depend on what kind of background you have. Hope Helps!