Company logo
  • Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Planes
    • Pruebas
    • Nómina
    • Blog
    • Comercial
    • Calculadora

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: enter image description here

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

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' }.

7 months ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos