0
199
ViewsCó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: 
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?
1 answers
Answer question0
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) + '…'; 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' } .