固定 height/width 卡片中的文本，带有溢出轮播以显示剩余内容

Question

我有一张高度和宽度固定的卡片，我必须在其中填充动态内容。其内容将是一个简单字符串格式的大列表 {key, value}。我必须用换行符显示每个键值对。

在每个键值对后添加一个换行符。
如果列表超出卡片高度，在底部添加一个下一步按钮，点击后显示剩余文本。

例如：假设我的卡片可以容纳 3 key/value 对，如果有 9 个条目，那么我必须显示 3 页带有 next/prev 按钮的文本。

我想通过 overflow 属性我们可以识别并添加一个滚动条，但是我该怎么做这个分页呢？有没有属性之类的列数之类的东西可以提供帮助？我不确定如何处理这个问题。

Answer 1

我认为 CSS 没有在您单击 NEXT 或 PREV 按钮后滚动一定量页面的逻辑。您需要使用一些 Javascript 才能实现该功能。

对于 'NEXT' 按钮，您应该使用代码：

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
});

同样，对于 'PREV' 按钮，您需要使用：

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
});

固定 height/width 卡片中的文本，带有溢出轮播以显示剩余内容

Text in a fixed height/width card with overflow carousel to display remaining content

css

pagination

overflow

carousel