How do I truncate Text in my CMS to display an ellipsis "..." after a certain px or character amount?

Design help Custom code
1

Hi Community,

I’m running into trouble here with adding custom code. I’d like to truncate the Names of the Experts listed in my CMS so that after a certain px amount the text adds a “…” instead of wrapping the name or shrinking the “blue check” mark beside it. I’d like the blue check to remain the same size, but if the name becomes too long add an “…”

Also, for the short bio underneath (in light gray) underneath each name, I’d like to add an ellipsis after a certain character amount so that the bios fit and maintain the grid size throughout the page.

I’ve attached an image of the design I’m going for, notice the “…” for the name and bio. Please help!!! I love this community and any guidance on updated best practices for adding custom code here would be tremendously appreciated. :grinning:

Screen Shot 2021-05-17 at 6.52.19 PM
Screen Shot 2021-05-17 at 6.52.19 PM968×592 96 KB

Here is my site Read-Only: https://preview.webflow.com/preview/intro-app?utm_medium=preview_link&utm_source=designer&utm_content=intro-app&preview=86721e8ef2839bfae66e8281e3d8f962&pageId=6095eabb51a120321bbdaca3&mode=preview

2

@Austin-Cole - you can use the text-overflow css property as long as you set a fixed width on the div containing the name. Check out this article for more detail: