0
41
ViewsHow 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?
1 answers
Answer question0
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) + '…';
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' }.