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

So, I know this isn't ideal but it is a work-around. The CSS3 specification says that the ellipsis must take their style from the container that they're in. This works correctly in all browsers except IE8/9 which takes it's ellipsis style from the first letter of the container. The work-around I propose is to wrap the text inside of your "overflowed" elements with an inline element, give the outer container a font where the ellipsis character is defined and give the inline element inside your custom font. It would look something like this fiddle: http://jsfiddle.net/u9dudost/2/

If you need to add IE8/9 support, add the following:

div {
    white-space: nowrap;
}

div::before {
    font-family: 'Helvetica', sans-serif; /* Your custom font here. */
    content: ''; /* IE9 fix */
}