Search code examples
htmlcssellipsis

CSS ellipsis not working on specific web fonts

I'm having a weird problem with a section of my site. on an h2 tag, I want to use the CSS ellipsis property whenever the text is overflowing the screen size.

Now, this is a repetitive section I am using on this page - and the only difference is the font applied to the h2 tag - so I know the CSS style I am using is good (overflow: hidden, text-overflow: ellipsis, and etc...)

Can anyone help me find what is the problem?

here is a screenshot of the section that is working the right way:

here is a screenshot of the section that is not working the right way

You can visit the site at - https://www.hacollective.com/ and test in mobile size in order to see the difference.

The id of the part with the h2 problem is "col-221542828"

Thanks in advance,

Shahar.

Solution

  • The problem with missing ellipse points lies in the font specified for this h2 - font-family: tzur,sans-serif!important.

    Here:

    .font-tzur {
    font-family: tzur,sans-serif!important;
}

    Which are loaded from the font-load-tzur.css file.

    Check the correctness of loading this font tzur.

    For example - If you put a different font, the ellipse points will appear.