Determine and indicate when text is being truncated

Open
#671 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
35/100
Issue type
Feature
Clarity
Mostly clear
Activity status
Stale
Tech stack
typescript
Domain
frontend

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.

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.

Dominant language
TypeScript
Stars
672
Forks
107
Avg merge
2d 12h
Merged PRs (30d)
26

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from StackExchange/Stacks

All issues in StackExchange/Stacks

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.