Add vx text truncation #447
Conversation
|
Great |
|
I could use this feature. |
packages/vx-text/src/Text.js
Outdated
| @@ -149,6 +170,7 @@ Text.defaultProps = { | |||
| capHeight: '0.71em', // Magic number from d3 | |||
| scaleToFit: false, | |||
| textAnchor: 'start', | |||
| truncateText: '...', | |||
|
Thanks for the contribution, I'm sorry it wasn't reviewed and merged within any reasonable time frame. Since the repo has been re-written in TS, it's not super easy to merge this anymore. I'm committed to reviewing it / getting it in if you are interested in rebasing on the latest master 🙏 |
MikeyParton
force-pushed
the
vx-text-truncate
branch
from
6834737
to
fb7206f
Compare
MikeyParton
force-pushed
the
vx-text-truncate
branch
from
fb7206f
to
681150e
Compare
|
All good. I just found there are some extra edge cases that this doesn't account for either e.g. accounting for the length of interpreted html character codes. I don't really need this feature anymore, so I'm happy to close it for now - it seems more trouble than it's worth. |
|
Is there any interest to reimplement this feature? |
|
Still happy to review a PR on my end |
|
Personally I don't need this feature anymore and I don't really have time to reimplement it at the moment. |
🚀 Enhancements
I have a use case where I needed to restrict some text labels to a maximum number of lines.
Adds lineClamp and truncateText props to vx/text.
lineClamp restricts the number of lines of the rendered text. When the lineClamp is exceeded, the text is truncated with the truncateText which by default is '...'
Here's an example:
https://codesandbox.io/s/3v3rn68mj6