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
1 year ago
Where you able to get this to work?
Mr.R
1 year 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
1 year 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
1 year ago
This might help: https://css-tricks.com/flexbox-truncated-text/
🙂
👍1