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

implementing GraphQL lists in mutations using Apollo in a React JS application

Looking for an alternative method since jQuery has deprecated the use of '.toggle()' function

Guide on choosing a specific div element from a different page using AJAX

What are the distinguishing factors between using redux saga and redux thunk?

SWR Fails to Recognize Environment Variables

Creating a responsive layout with two nested div elements inside a parent div, all styled

How do I send a 404 error in Node JS Express when a third party API receives a bad request?

Using codeigniter and JQuery, I have developed a unique Javascript function to selectively extract a specific portion of text

What's the best way to handle variables and numerical calculations within PHP loops when dealing with forms?

Is it possible for GraphQL to communicate with an external API?

Choose a Different Value for Another HTML Element's Class

Adding a value to an element in JavaScript to interact with it using Selenium

Is it possible to modify the number format of an input field while in Antd's table-row-edit mode?

Can an object serve as a property name for another object?

Enhancing the Strength of Password Generator

Tips for displaying the Max Window Icon (TitleBar) in ReactJS

Illuminate specific areas of a mapped image upon hovering over text on a webpage

Looking for assistance with aligning a form in the center?

Uncertain about the process of accessing req.body data

The type does not contain a property named `sort`