Giters

xiaody / react-lines-ellipsis

Simple multiline ellipsis component for React.JS

Home Page:https://xiaody.github.io/react-lines-ellipsis/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Letter spacing

zmanring-zz opened this issue · comments

commented

Looks like after you add more than .5px of letter spacing that it breaks the ... to a new line. Does the code handle scenarios like this?

commented

I have reproduced a similar issue where the ellipsis and characters in the text or html string are breaking onto a new line on initial load. I don't think it has to do with letter spacing, but the main font is loading in AFTER the react ellipsis component has mounted. Essentially, the fallback font has a smaller footprint than the downloaded font, thus breaking the truncation. This could be circumvented by allowing the user to pass an argument to the responsiveHOC to forceReload the ellipsis component after a setTimeout. The argument should be a timeout in milliseconds.

commented

@gareys good catch about the web font issue.

But I don't think this component should provide a timeout param, which would be quite weird. You can set a timeout outside the component and pass a different key to force this component to re-mount.

Also, there seems some APIs better than timeout to listen a font loaded event, like document.fonts.ready, maybe you can try those. If any of them really works, maybe we can add it to the responsiveHOC.

Using prefetch or preconnect can also help you load the fonts faster, though they can't guarantee you to finish loading fonts before JavaScript files.

commented

I am still trying to find a solution for this.. I tried the prefetch/preload css and it doesn't seem to help :/ It seems as if the plugin is only pulling from Times where we have a custom font that isn't being recognized. I got around this by forcing a font on .LinesEllipsis but that's not a solution unless the whole site is the same font.