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

0

41
Views
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?

9 months ago · Juan Pablo Isaza
1 answers
Answer question

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

9 months 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 job Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2023 PeakU Inc. All Rights Reserved.