Obtaining the current index in a list of strings using the map() function

Here is the code snippet I am working with:

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

Currently, this code displays different words in multiple lines in my browser. However, I would like to achieve a specific layout as shown in the image below: https://i.sstatic.net/OOazN.png

If the number of rows exceed three, I want to display only the first three rows of words and include an ellipsis "..." to indicate that there are more words in the list. Can someone suggest a way to implement this? How can I determine the particular row of words being displayed?

javascripthtmlcssreactjs

Answer №1

If you are aware of the number of characters that can fit per line, you can perform a calculation based on that information. Just to clarify, are you looking to simply display an ellipsis at the end, or do you want it to be a clickable element that expands the container to show the entire list? If you are interested in the basic functionality, you could achieve it using JS or CSS pseudo-content.

Here is an example using JS:

const container = document.querySelector('.words-list'); // target the container that holds 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;
}

Regarding the CSS solution, after adding a class via JS, you can utilize text-overflow: ellipsis or ::after { content: '\2026' } to achieve the desired effect.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I am unable to use the "@" symbol to search for files in the Next platform

Recently, I used @/ to find and import files in Next JS. Due to an issue, I deleted my node modules folder and reinstalled all the packages. After that deletion, @/ stopped functioning properly and I had to change it to ../ instead. This is how my jsconf ...

reactjsnext.jsnext.js13

Step-by-step guide on preventing an item from collapsing in a Bootstrap navbar

Is there a way to exclude a specific item from the navbar collapse box when the screen size becomes small? Here is the current HTML code: <div class="container"> <nav class="navbar navbar-default"> <div class="container-fluid"> ...

jqueryhtmlcsstwitter-bootstrapnavbar

Importing all Material UI Icons simultaneously through the use of an asterisk

I need help with importing all MUI Icons simultaneously for a dynamic icon component. Whenever I try to import using an asterisk, I encounter an error. The component functions properly when importing a single Icon, but not when using an asterisk to import ...

reactjsnext.jsimportmaterial-uiicons

Using AJAX to handle 404 errors in Slim PHP

When I attempt to retrieve data using AJAX in my Slim PHP application, I am encountering a 404 (Not found) error in the console. The specific error message is as follows: http://localhost:8888/Project/mods/public/edit-mod/ajax/get-categories?gameID=1 404 ...

javascriptphpjqueryajaxslim

A guide to resolving a sinonJS stub issue

Trying to stub a request with SinonJS has been a challenge for me. I set up the mock request before each test to use fake data, but it's not working as expected. I attempted to use Promise.resolve for resolving, but that didn't work out either. ...

javascriptunit-testingvue.jsvuexsinon

Utilize CamelCase in jQuery for Better Code Readability

Upon examining the jQuery source code, I noticed an interesting use of camelcase: camelCase: function( string ) { return string.replace( rmsPrefix, "ms-" ).replace( rdashAlpha, fcamelCase ); } // where: rmsPrefix = /^-ms-/, rdashAlpha = /-([\da- ...

javascriptjqueryregexunicode

ExpressJS exhibits unique behavior based on whether the API is requested with or without the specified PORT number

I have encountered an issue with my 2 flutter web apps. One of them is functioning flawlessly when I request the URL, but the other one only works when I include the port xxxxx:4000/nexus-vote. However, when I remove the port, I receive a status code of 20 ...

javascriptflutterexpressnginx

Encountering an error with unexpected token in jsdom while utilizing babel and npx

I am looking to perform canvas tests exclusively in node.js. Here is my package.json { "name": "test", "description": "Test", "version": "0.1.0", "author": "anthony@work", "dependencies": { "canvas": "^1.6.7", }, "devDependencies": { ...

javascriptnpmbabeljs

Struggling to align content in the center using the Box component in MaterialUI and React

I am having trouble centering the child component within the Box component from MaterialUI in react. Despite trying various parameters such as alignItems and justifyContent, I have been unsuccessful. Here is how I am exporting the component: export const ...

reactjsmaterial-ui

Ensuring there are no null values in TypeScript

I am encountering an issue with the following TypeScript code: console.log ('collection[0] -> ' + collection[0] ); console.log ('collection[0] !== null -> ' + collection[0] !== null); However, the output on the console is unexp ...

javascriptnode.jstypescript

Angular 2 encountered a fatal error: Issues with parsing the template:

Here is the code snippet I am currently working with: <div class="container"> <div [hidden]="loggedIn"> <md-grid-list cols="6" [style.margin-top]="'20px'"> <md-grid-tile [colspan]="1"></md-grid-tile> I have already ...

javascriptangular

Error Notification in React Bootstrap - Stay Informed!

When a 401 error is returned from the API, I need to show an error message in the component. My approach involves using an unbound state and ES6. However, I encountered this error: Cannot read property 'setState' of undefined Below is the login ...

javascriptreactjsreact-bootstrap

Is it possible to manipulate an Angular #variableName in order to retrieve an ElementRef for an HTML element?

Suppose I have a scenario where I create a button like this: <button #myButton>My Button</button> ...and then use ViewChild in the following way: @ViewChild('myButton', { static: true }) createButton: ElementRef; In this case, creat ...

javascripthtmlangulartypescriptangular-material

Exploring the Wonderful World of Styled Components

I have a query regarding styled components and how they interact when one is referenced within another. While I've looked at the official documentation with the Link example, I'm still unclear on the exact behavior when one styled component refe ...

javascriptreactjstypescriptstyled-components

What could be causing the multifiles uploader to fail in uploading files?

I have been attempting to create a multiple files uploader with sorter connected to a database on my website. However, whenever I try to upload some files, the uploader sends me several notices. Notice: Undefined index: media in /var/www/mediasorter/mediau ...

javascriptphpajaxpdomultifile-uploader

Unable to retrieve value from TextField component in material-ui

Parent Component export default class Parent extends Component { handleSubmit = (e) => { e.preventDefault(); console.log('1', e.target); // the result is like <form><div>...<input/></div></form> ...

formsreactjssubmittextfieldmaterial-ui

The transition effect for the box shadow is being altered to modify the dimensions

--- UPDATE 2 ---- Here is a different example video showcasing the bizarre behavior of my react application. I am struggling to identify the root cause of this issue. See the issue in action I have a div with the class name side-btn It contains an anim ...

cssreactjs

What are some ways I can optimize my Bootstrap CSS code to enhance responsiveness across different page widths?

After creating this fiddle, I noticed that my webpage layout with two texts stacked on top of each other looks great on wide screens. However, when the screen size is reduced or viewed on a mobile device, the layout gets all messed up. Take a look at this ...

javascriptjqueryhtmlcsstwitter-bootstrap

The parent's height remains unaffected by the margins of its child element

My code snippet is concise: .parent{ box-sizing: border-box; } .child{ height: 100px; margin: 20px; background: red; } .a1{ background: green; } <!DOCTYPE html> <html> <head> </head> <body> ...

htmlcss

Is it possible to update the variable value in one controller from another controller after an http.get request has been made

I have encountered an issue with updating a variable from one controller to another using a service. Despite my efforts, the variable is not being updated. The goal is to have the variable $scope.names in controller 'select' update in controller ...

javascriptangularjs