Ellipses in Services Icon


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?



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.



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!



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.