Text generated is "too long"

[Trevoke]

Here is a screenshot of what I mean - you can see that on the original load, using a mobile device tool on Chrome, the text goes too far. (it should be aligned, to the left and to the right, with the blue bar underneath).

Fun fact, if I turn off the mobile device tool and then turn it on again, this happens:

So the code is doing the right thing, mostly. Let me know if you need more stuff from me.

[pablosichert]

Thank you for the screenshots - from your description I assume that re-sizing the window (without toggling chrome device mode) also results in re-rendering and correctly truncating the text, is that correct?

It would be helpful to know which children you provided to the component. Does the child re-render while <Truncate> has been mounted already, for example by fetching its text-content asynchronously?

Was there any error in the console?

[Trevoke]

There were no errors in the console, and no children were passed to the component, just jsx-interpolated text ( props.foo )

If I don't toggle chrome device mode, then resizing the window won't do anything, since it's set to the mobile width -- and my use case is mobile devices, so I didn't try on a regular browser window.

[Trevoke]

I have moved on to another module, react-ellipsify, that provided the desired behavior along with the text-expansion feature I desired, so my available time to help you troubleshoot has unfortunately been cut short for the time being.

[pablosichert]

Having revealed this bug is helpful anyway - so thanks for the contribution 🌞

I have found an explanation for the observed behavior:

• Pages that are not optimized for mobile get enhanced with an "text inflating algorithm" aka "font boosting", if not prevented
• Chrome Device Mode emulates rendering on a mobile device and triggers said behavior

[...] When pages load, Font Boosting increases the font size of text in wide columns, so you won't have to zoom in on them as much and hence every column fits onscreen at a legible text size. - WebKit Bug Tracker

Why is this causing trouble with react-truncate?

• The calculations inside this module are based on font properties read by .getComputedStyle(). Unfortunately those numbers lie when font boosting is applied and return the initial font sizes
• That explains why the text in your screenshot is cut to the correct line of numbers, but exceeds the boundaries on the right side

How can you fix it?

• Solution: Be explicit to the browser about rendering on mobile and add <meta name="viewport" content="width=device-width, initial-scale=1"> to the document head - source
• Hack: Apply max-height: 999999px; CSS property to text elements to disable font boosting - source Note: this works when you run it on an actual mobile device - the chrome emulation will still apply font boosting
• Use not widely adopted properties: text-size-adjust in Safari and on MDN

A note on the text-expansion: This is something that you could easily implement using react-truncate. In the link you provide to ellipsis you could toggle a variable in your parent component and provide it to the lines prop, 0 means the text will not be truncated

[pablosichert]

Here you have a gist for an example <ReadMore> component that wraps <Truncate>