Wrong lines calculation when width specified and having responsive container

[kis]

When container is responsive and it's size depends on window size and we specify truncate text with lines and width params we have wrong lines calculation (having more or less actual lines than we specified)

[lolochka]

I have also faced this problem for <Truncate /> text inside a responsive element (there should be 3 lines)

[arturTsal]

I have faced the same issue, does anybody know any solution or hack maybe?

[pawelangelow]

I'm having a similar problem. As far as I can tell it's due to the different fonts. In my case, I'm usingopen-sans. My guess:

1. Initially the page is loading with some default font
2. The component is rendered, so the width of the parent is calculated. For the calculation, the width kind of respects the font which is used.
3. Fonts are loaded, the content's width is changing, but there's nobody to tell the component to re-render.
4. I have an extra line of text, as @lolochka screenshot.

Check https://github.com/pablosichert/react-truncate/issues/16 and check @bjcancin solution. It seems to work, although there is an awful re-render.