On page load, component renders over many lines

[philest]

Observed Behavior 1-2 seconds after page-load:

Expected Behavior:

[philest]

@pablosichert

[philest]

Update: In other cases, it hangs in the broken state permanently, until the window is resized. This is a pretty serious bug and can make the component unusuable:

[cxreiff]

I'm getting the same issue, and some lines are being hidden completely.

[Jachaplin]

@philest @jaxuru @pablosichert
The root of the problem is that it randomly adds br tags in the text. Just wrap the code in a div tag with a class name of your choice and then do this in your CSS file:

.your-className br {
display: none;
}

.your-className span {
margin-right: 4px;
}

[timrossinfo]

I had a similar issue and tracked it down to using letter-spacing in our CSS, which is a known limitation of react-truncate: pablosichert/react-truncate#59

[Slitthe]

I've fixed it by storing a ref to the Truncate component within the ShowMore component and then calling the truncate function manually after the Truncate is loaded

componentDidUpdate() { this.truncateRef.current.calcTargetWidth(); }

It might cause some performance loss though, but it seems insignificant for now.