Question

0

38

Vistas

How to get the current row of list of strings with map()

I have the following code:

      {words.map((word: string, index) => (
        <Span key={index}>
          <Span>
            {word}
          </Span>
        </Span>
      ))}

This is giving me number of lines of different words in my browser. What I would like to do is shown in the picture:

If there are more then three rows of words I want to show only first three rows of words and add "..." as a sign that there are more words in the list that are not shown. Does anyone have idea how I can do that? How to find on which row of words I am?

7 months ago · Juan Pablo Isaza

1 Respuestas

Responde la pregunta

0

Responde la pregunta

Encuentra empleos remotos

Answer 1 · 2022-07-13T10:31:58.155Z

If you know how many characters fit per line, you could do a calculation based off of that. For clarification, though: do you just want to show an ellipsis at the end, or is that supposed to be a clickable element to expand the container to show the entire list? If it's the more basic part, you could do it all via JS or use CSS pseudo-content.

Example JS:

const container = document.querySelector('.words-list'); // whatever contains the list of words
const wordsStr = words.join(', ');
const lineChars = 20;
const linesToShow = 3;
if (wordsStr.length > lineChars * linesToShow) {
    let wordsSub = wordsStr.substr(0, lineChars * linesToShow - 3) + '&hellip;';
    container.innerText = wordsSub;
}

For the CSS portion, once you've added a class via JS, you can use text-overflow: ellipsis or ::after { content: '\2026' }.