Ellipses in Services Icon

Hello!

I would like my services icons on the homepage to only display the first line of text that is present on the connected services page. Instead, I have these, which may or may not have the first few lines, all ending with " . . . ".
How do I limit it to only one line of text, and how do I stop the " . . . " from appearing at the end?

Thanks

Hello,

Please try this CSS code below:

.service-title {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Add the code above to Customize > additional CSS.

Regards,

Awan

Thank you for your answer, and I’m sorry that my reply has taken so long.
A few questions:
1 - Should “service-title” be replaced with the name of each service?
2 - if so, do I need to cut and paste this code separately for each service?

Thanks for the help!

Zac

Hi,

No worries :slight_smile:
No need to change the service-title because it can be used globally. So, you just need to copy-paste the code above to Customize > additional CSS.