时间戳

首页 > 解决方案 > 如何使用 map() 获取字符串列表的当前行

javascript - 如何使用 map() 获取字符串列表的当前行

问题描述

我有以下代码：

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

这给了我浏览器中不同单词的行数。我想做的如图所示： 在此处输入图像描述

如果单词多于三行，我只想显示前三行单词并添加“...”作为列表中未显示的更多单词的标志。有谁知道我该怎么做？如何找到我在哪一行？

标签： javascripthtmlcssreactjs

解决方案

如果您知道每行可以容纳多少个字符，则可以据此进行计算。不过，为了澄清：您只是想在末尾显示一个省略号，还是应该是一个可点击的元素来展开容器以显示整个列表？如果它是更基础的部分，你可以通过 JS 或使用 CSS 伪内容来完成。

示例 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;
}

对于 CSS 部分，一旦您通过 JS 添加了一个类，您就可以使用text-overflow: ellipsis或::after { content: '\2026' }.

推荐阅读