• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
    • Questions
    • Teachers
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

199
Views
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 answers
Answer question

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 Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error