Skip to main content

I have text in a component set to truncate, however when I create an instance of the component and add text through the properties panel I only get an eclipse at the start of the text box (no text).


However when I change the width of the instance the truncation works as expected. (see attached).


Additionally, if I input text directly into the instance (by clicking into the text box), the truncating is works properly.


Can anyone help and is this a glitch or am I doing something wrong?


I’m having this issue as well.


My existing component which was working fine stopped working and resulted to only the first 2-3 characters showing then a truncation “…”


I think this is after a latest auto-update?


Have the same problem. Happened just today


+1, also been experiencing this since yesterday.


+1

It started a day ago or so, first I thought something with my component was destroyed, but I cannot make it work any longer, the three dots sometimes is outside the component as well, sometimes the three dots are cut/truncated as well

image


I just reported it as a bug, maybe more people should do it?


Plus 1. Following for possible Solutions


A temporary solution that worked for me was to detach the component. It resolves this glitch.


+1, I’m also having this problem.


I’m using text truncating in a container not wide enough to show everything (meaning, there’s extra text after the three dots), but text gets cut off before the end of the container. It gets cut off in the middle of it. It looks just fine while I’m editing the field. See the screenshots.




The cutoff point remains the same no matter how much I stretch the field, until there is enough space for the whole text to appear.


Has anyone had similar issues? Any idea why this happens?


So, I think I might have found out what the issue is.


The text container is in an instance. Container horizontal resizing is set to Fill. When I return it to Fixed, the container actually ends at the same place where the truncating starts in a Fill setup. When I detach instance, the truncating starts working as intended.


So this clearly has something to do with the fact that the text container is in a component. As to why it behaves like this, I have no idea. Probably some deeply buried system issue.


Hope Figma devs see this. Or anyone who encounters the same issue. Hope I’ve explained it well enough.


We’re having the same bug! Will try reporting it.


I’m having the same problem, and the weirdest part is that instances of the component with the issue…don’t have the issue. Same exact settings on the text, but even when I paste a new instance of the component, that instance has properly truncated text. But the main component does not. It truncates about 20% of the way into the line, instead of 100%.


Hi everyone, thank you for reporting this. Our engineering team is actively investigating the matter and working to a resolution.


Hi everyone, thank you for your patience. Our engineering team has successfully released a fix! Please refresh Figma to ensure that you are using the fixed version.


Seems to work for me, but it looks like I have to “resize” all places, is there a way to “refresh” all my work?


image

Looks good on my end now.


@Ryan_52 Thank you guys for the quick fix!


Cool, thanks for a quick update, @Ryan_52!


I agree with @Lars_Dahlen though, I also have to see to every single section and click on it to actually update it. I don’t have to resize it to nudge the truncate to start working properly, but I do have to simply select the text container to update the truncate. Refreshing the file does do the trick.


Thanks for the update but i still think it isn’t working perfectly. The truncation ist still ending to soon. The truncation is ending in the middle of a button and when i am clicking inside the textfield, the truncation is running out of the textframe.


You may need to select a problem instance and click the ‘Regenerate all instances (slow)’ command (found in the Main Menu in the top left, and then click “Quick Actions” and type the command and click this), for these to now display correctly.


Can you try and reload the file or Regenerate all instances (slow) to see if that helps? If you are still seeing an issue, mind reaching out to our support team directly via this form for help: https://help.figma.com/hc/en-us/requests/new


I did that and it seems to work, thanks @Ryan_52


I’ve updated to the latest version this morning (Oct 16, 2023) and am still seeing truncating issues on my end. I’ve spent loads of time troubleshooting to see if there is a problem with how my component is setup but I cannot reconcile.




Once I toggle a boolean prop (to display icon) the text box (set to ‘Fill’) changes width however, the text truncation doesn’t follow the adjusted text field width as expected.


To fix this, I have to click into the text box and backspace to the point where the text is being truncated, then I have to reformat the text. Only then will the text w/ellipsis appropriately fill the text box.


Reply