Text-overflow: Ellipsis mysteriously disappears behind text when viewed on Android devices

Question

Attempting to use ellipsis with a h2 tag using text-overflow. Everything seems to be working correctly in all browsers except for Android.

The three dots seem to appear behind the clipped text, making the ellipsis invisible.

The CSS for the h2 element is as follows:

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

I have tried many different styles but haven't found what might be causing this issue.

A test with dummy content worked fine, so I am curious if anyone else has encountered this problem before?

Answer 1

Answer №1

After carefully analyzing the CSS code, I was able to identify the issue. It seems that the culprit causing the bug was the line

text-rendering: optimizeLegibility;

. I removed this line and now everything is functioning flawlessly!

Answer 2

After carefully analyzing the CSS code, I was able to identify the issue. It seems that the culprit causing the bug was the line

text-rendering: optimizeLegibility;

. I removed this line and now everything is functioning flawlessly!

Answer 3

Success! I tried this solution and it worked flawlessly.

The key is to include text-rendering: auto; in the css style with ellipsis applied.

Answer 4

Success! I tried this solution and it worked flawlessly.

The key is to include text-rendering: auto; in the css style with ellipsis applied.