Truncate Text

Alex · 2024-05-04T06:54:27.755+00:00

Are we able to truncate text values in Toddle? I want to limit text from overflowing like shown in the screenshot

Alex

1 year ago

Are we able to truncate text values in Toddle? I want to limit text from overflowing like shown in the screenshot
svenning

1 year ago

Yes, we don't have any UI for that at the moment, but try and use the custom CSS section. And have a read here: https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow
Alex

1 year ago

Thank you!
Andreas Møller

1 year ago

You might need to add white-space: nowrap
Alex

1 year ago

Thanks I'll give it a go!
Tod

1 year ago

Great energy @Alex! Your continuous contribution to the toddle Community just made you advance to Community Level 2!
Seun Orofin

11 months ago

Where you able to get this to work?
Mr.R

8 months ago

Hi, i tried to add the "text-overflow: ellipsis" on my list returned from the API but it doesn't do anything when down-resizing?
@Mr.R
Hi, i tried to add the "text-overflow: ellipsis" on my list returned from the API but it doesn't do anything when down-resizing?
needtheanswers

8 months ago

Does your parent div have a fixed width? If not this might be the reason 🤔
@Mr.R
Hi, i tried to add the "text-overflow: ellipsis" on my list returned from the API but it doesn't do anything when down-resizing?
Max

8 months ago

This might help: https://css-tricks.com/flexbox-truncated-text/
🙂