I have a card with fixed height and width inside which I have to populate dynamic content. The content for this will be a big list of {key, value} in simple string format. I have to display each key, value pair with a line break.

1. Add one line break after every key-value pair.
2. If the list overflows the card height, add a next button at the bottom and when clicked, display the remaining text.

Ex: if suppose my card can accommodate 3 key/value pairs and if there are 9 entries then I have to show 3 pages of text with next/prev buttons.

I guess with overflow property we can identify and add a scroll, but how do I do this pagination? Is there any property like column-count or something that can help? I am not sure how to approach this.

CodePudding user response：

I don't think that CSS has the logics to scroll a certain amount of the page after you click the NEXT or PREV button. You need to use a bit of Javascript to attain the functionality.

For the 'NEXT' button you should use the code:

nextBtn.addEventListener('click', function(){
   let cardHt = card.offsetHeight;//Calculate the height of the card
   card.scrollY(cardHt 'px');//Scroll down the height of the card
});

Similarily, for the 'PREV' Button you need to use:

prevBtn.addEventListener('click', function(){
    let cardHt = card.offsetHeight;//Calculate the height of the card
    card.scrollY(-cardHt 'px');//Scroll up the height of the card
});