Giters

pablosichert / react-truncate

React component for truncating multi-line spans and adding an ellipsis.

Home Page:https://www.webpackbin.com/bins/-Kw6QnAkjmv1OD6Of-ZD

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

letter-spacing not taken into account

DanDeMicco opened this issue · comments

commented

Hi, thanks for creating an maintaining this repo.

I am running into an issue where the truncating is not working as expected. If i specify there to be 2 lines to be shown, it will show something like

lorem ipsum
lorem ipsum
lorem...

I did some debugging as I found it worked elsewhere, and found out removing letter-spacing makes it work correctly. Looking through the source, it indeed appears there is no mention of letter-spacing in the css properties.

Is there a way in which the letter spacing can be taken into account when calculating the width, either automatically or by specifying a custom prop?

Here is a WebpackBin of the problem https://www.webpackbin.com/bins/-KueNc5FP6xDfCRLM4zp

commented

Hi, thanks for reporting this issue.

Unfortunately, the canvas context.font API (which this component relies on) does not support a letter spacing / word spacing argument. So there's no way to easily support that feature.

See #30 (comment) for similar context.

commented

Chrome now supports letter-spacing in v56 see CreateJS/EaselJS#872. Could be viable to provide a flag to expose the functionality or in 56=< choose to include line-height.