StackExchange / StackExchange/Stacks
Determine and indicate when text is being truncated
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 672
- Forks
- 107
- Avg merge
- 2d 12h
- Merged PRs (30d)
- 26
Description
When using truncation on text, there currently is no way to tell when the text is being truncated. I would like to be able to tell this, optimally with a class (is-truncated maybe) - modeling the usage off of expandable (with its is-expanded class that actually toggles the functionality).
I realize that the current truncation is built off of specific max-heights (and if the class is less than that height, it is simply not truncated). This is nice for demo purposes, but a primary usage scenario is that when the text is truncated, I want to show a "Read more" button that can toggle off the truncation (and then it switches to "Read less" which can restore the truncation). It's hard to think of a scenario where I am truncating text and just do not want to provide the user with a way to see all of the text. Yet, I also do not want to show a "Read more" button unless it is necessary to do so. And I cant even do a char count to try to estimate when I will hit the limit, since the truncation point changes as the screen dimensions change.
An is-truncated class would be nice. But more generally, looking for a way that I can set the visibility of a "Read more" button based on whether or not the text is being truncated.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the truncation documentation linked in the issue and compare its behavior with expandable and its is-expanded class. Inspect how the current max-height-based truncation works across screen sizes. Done means exposing a reliable indication of actual truncation so a Read more control can be shown only when needed and can restore truncation afterward.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100