Text-overflow: ellipsis jumps behind text on Andro

Question

im trying to ellipsis a h2 tag with text-overflow. It works fine i all browsers but on Android.

The three dots jumps behind the clipped text so you can't actually see the ellipsis.

The css for the h2 is:

    h2 {
    font-size: 20px;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 40%;     
}

I have a lot of other styles but can't figure out what will affect this.

I did a dummy test which works fine, so i was wondering if someone experienced this behaviour before?

Answer 1

So i managed to figure it out, by running through the css line by line. It turns out that text-rendering: optimizeLegibility; causes the bug! Removed it and now it works perfectly!

Answer 2

this worked for me

Basically add text-rendering: auto; to your css that has the ellipsis

https://github.com/driftyco/ionic/issues/663