• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

202
Vistas
Cómo obtener la fila actual de la lista de cadenas con map ()

Tengo el siguiente código:

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

Esto me está dando una cantidad de líneas de diferentes palabras en mi navegador. Lo que me gustaría hacer se muestra en la imagen: ingrese la descripción de la imagen aquí

Si hay más de tres filas de palabras, quiero mostrar solo las primeras tres filas de palabras y agregar "..." como señal de que hay más palabras en la lista que no se muestran. ¿Alguien tiene idea de cómo puedo hacer eso? ¿Cómo encontrar en qué fila de palabras estoy?

almost 3 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Si sabe cuántos caracteres caben por línea, podría hacer un cálculo basado en eso. Sin embargo, para aclarar: ¿solo desea mostrar puntos suspensivos al final, o se supone que es un elemento en el que se puede hacer clic para expandir el contenedor y mostrar la lista completa? Si es la parte más básica, puede hacerlo todo a través de JS o usar pseudocontenido CSS.

Ejemplo 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; }

Para la parte de CSS, una vez que haya agregado una clase a través de JS, puede usar text-overflow: ellipsis o ::after { content: '\2026' } .

almost 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda