wrong width of span on load

[yesh]

Hi,
I don't know if I am implementing the component in a wrong way or if it is a bug.

I'm trying to truncate plain text in a gatsby project:

the code is

<div>
  <Truncate lines={3}>
    {text}
  </Truncate>
</div>

where the input text is:

Retro vegan hammock, street art listicle pop-up tilde organic trust fund authentic. Affogato af franzen aesthetic selvage cred. Hashtag la croix vape heirloom umami kinfolk. Before they sold out lyft crucifix venmo. Flannel tacos beard selfies master cleanse, +1 plaid gastropub. Fashion axe mumblecore ennui four loko, snackwave kitsch hell of leggings. Actually thundercats blog +1 echo park dreamcatcher occupy slow-carb 3 wolf moon hell of seitan subway tile sustainable flannel coloring book.

and on page load the result looks like this:

then if I resize the browser window the text resizes correctly like this:

am I missing something in the settings or is it a bug?

thank you.

[pguduguntla]

@yesh were you able to fix this?

[yesh]

@yesh were you able to fix this?

unfortunately not.