Condense a lineup of names into only two rows

Question

Condense a lineup of names into only two rows

I have a challenge where I need to showcase a list of names separated by commas, pulled from an array in my React component. The HTML output should appear as follows:

<div>
<span>Liza</span>, <span>Eric</span>, <span>Michael</span>, <span>Natalie</span>, <span>Stephan</span>
<a href="#" className="show-more hidden">and {remaining} more...</a>
</div>

However, it is crucial that this list is displayed within 2 lines of content. If the list exceeds this limit, the number of remaining names that are hidden must be shown:

Liza, Eric,

Michael -and 2 more...-

In addition, the display needs to be responsive (only showing 'X more' when truncating) with the list being cut off at the final visible name so that the "and X more" text fits within 2 lines.

Can anyone suggest an effective approach for solving this problem? I suspect a pure CSS solution may not suffice due to the truncation needed.

Thank you!

PS: An image example of the desired outcome would be helpful.

javascript css reactjs

Answer 1

Answer №1

There may be some CSS solutions for truncating text, but with React, you can achieve this:

Display your list of names without truncation and hide the elements using visibility/opacity

Add a ref callback to each item:

<span ref={item => this.items.push(item)}

In the componentDidMount() lifecycle method, loop through this.items to calculate the total width of all items (item1.width + item2.width ...)
Once the total width exceeds the container's width, it's time to truncate the remaining items.
Update the internal state or use other means to re-render the list with truncation (
```
this.setState({truncate: true, remainingItemCount: x})
```
)
The render function can now utilize this state to correctly display the truncated list (you can also revert the visibility back to normal)

Learn more about the ref callback attribute in React documentation.

Answer 2

There may be some CSS solutions for truncating text, but with React, you can achieve this:

Display your list of names without truncation and hide the elements using visibility/opacity

Add a ref callback to each item:

<span ref={item => this.items.push(item)}

In the componentDidMount() lifecycle method, loop through this.items to calculate the total width of all items (item1.width + item2.width ...)
Once the total width exceeds the container's width, it's time to truncate the remaining items.
Update the internal state or use other means to re-render the list with truncation (
```
this.setState({truncate: true, remainingItemCount: x})
```
)
The render function can now utilize this state to correctly display the truncated list (you can also revert the visibility back to normal)

Learn more about the ref callback attribute in React documentation.

Condense a lineup of names into only two rows

Answer №1

Similar questions

Connecting the mat-progress bar to a specific project ID in a mat-table

What is the best way to link function calls together dynamically using RXJS?

Webpack is having trouble resolving the specified file or directory

executing several asynchronous requests upon loading the webpage in a single-page application

Encountering an error with the Next Auth adapter in TypeScript when attempting to modify the default User interface

Personalize the position of the v-select drop-down menu

Retrieve the current state within a redux action

The right column in a relatively positioned layout descends as an element in the left column is revealed

What are some alternatives to using fetch for making API calls in Next.js?

Access-Control-Allow-Origin does not permit the origin null

Passport.js does not provide authentication for server-side asynchronous requests

What is the best way to divide widgets in a Wordpress Sidebar?

Ways to expand the width of a div on hover - Angular navbar dropdown utilizing Bootstrap 4

React-Native-SVG encountered an error: Invariant Violation - the component "RNSVGGroup" could not be found in the UIManager

Issue with automatic form submission

Tips on eliminating the gap between two flex items while adjusting their size

Identify all div elements with a specific class within the parent div

Setting up a new folder in the internal storage within a React Native Expo environment

Is there a more efficient method for replacing all attributes on cloned elements?

Display a letter avatar using Material-UI in the absence of an image