Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Does not take letter-spacing or word-spacing into account #105

Closed
arasmussen opened this issue Mar 21, 2019 · 2 comments
Closed

Does not take letter-spacing or word-spacing into account #105

arasmussen opened this issue Mar 21, 2019 · 2 comments

Comments

@arasmussen
Copy link

If there's any letter-spacing / word-spacing set on the text, react-truncate will not calculate properly, and it'll render more than this.props.lines lines.

Looks like you can set letter-spacing / word-spacing on the canvas itself https://stackoverflow.com/questions/8952909/letter-spacing-in-canvas-element

Note that the canvas MUST be added to the DOM in order for Chrome to take into account word/letter spacing in its calculations. Probably fine to just add a hidden element somewhere and use it repeatedly.

@arasmussen
Copy link
Author

Here's a working demo: https://jsfiddle.net/zpxh647v/1/

@pablosichert
Copy link
Owner

Duplicate of #59.

Further context: #30 (comment).

If you want to support that in your codebase, I suggest monkey-patching Truncate.prototype.measureWidth

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants