CSS 省略号不适用于特定 web fonts

Question

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.

Answer 1

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.