使用map()遍历字符串列表时如何识别当前行，实现最多显示3行加省略号

方案1：纯CSS实现（优先推荐） #

不需要手动判断单词所在行，依赖浏览器原生排版能力即可实现需求，代码量最小、性能最高：
给包裹所有单词的父容器添加如下样式即可：

.word-wrapper {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 限制最多展示3行 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis; /* 超出部分末尾自动加省略号 */
  /* 保留你原本的容器样式，比如行高、单词间距、宽度设置等 */
}

这个方案兼容所有现代浏览器和移动端环境，你原本的单词用inline/inline-block属性的Span标签包裹的场景完全适用，省略号会自动渲染在第三行末尾，和需求效果匹配。 #

方案2：JS手动计算实现（需要自定义交互时使用） #

如果你需要自定义省略号样式、或者要额外获取每行的单词列表、加点击展开等交互，可以用JS计算每个单词的行位置，实现步骤如下：

1. 先隐藏渲染全量单词，用来计算每个单词的位置
2. 遍历所有单词的DOM节点，对比每个节点的offsetTop属性，值不同则说明换了新行，统计总行数
3. 保留前3行的单词，超出则在末尾加自定义省略号

React版本示例代码：

import { useRef, useEffect, useState } from 'react';

const WordGroup = ({ words }: { words: string[] }) => {
  const calcContainerRef = useRef<HTMLDivElement>(null);
  const [showWords, setShowWords] = useState<string[]>([]);
  const [hasMore, setHasMore] = useState(false);

  // 计算行位置，筛选展示内容
  const calcLines = () => {
    if (!calcContainerRef.current) return;
    const wordNodes = calcContainerRef.current.querySelectorAll<HTMLElement>('.word-item');
    if (wordNodes.length === 0) return;

    let lineCount = 1;
    let lastTop = wordNodes[0].offsetTop;
    const validWords: string[] = [];
    let overThreeLine = false;

    for (let i = 0; i < wordNodes.length; i++) {
      const node = wordNodes[i];
      if (node.offsetTop !== lastTop) {
        lineCount++;
        lastTop = node.offsetTop;
      }
      if (lineCount > 3) {
        overThreeLine = true;
        break;
      }
      validWords.push(words[i]);
    }
    setShowWords(validWords);
    setHasMore(overThreeLine);
  };

  useEffect(() => {
    calcLines();
    // 窗口宽度变化时重新计算
    window.addEventListener('resize', calcLines);
    return () => window.removeEventListener('resize', calcLines);
  }, [words]);

  return (
    <div className="word-wrapper">
      {/* 隐藏的计算层，用来获取真实排版的节点位置 */}
      <div 
        style={{ 
          position: 'absolute', 
          visibility: 'hidden', 
          pointerEvents: 'none',
          width: '100%'
        }} 
        ref={calcContainerRef}
      >
        {words.map((word, index) => (
          <span key={index} className="word-item">
            <span>{word}</span>
          </span>
        ))}
      </div>
      {/* 实际展示层 */}
      {showWords.map((word, index) => (
        <Span key={index}>
          <Span>{word}</Span>
        </Span>
      ))}
      {hasMore && <span>...</span>}
    </div>
  );
};

内容的提问来源于stack exchange，提问作者Aifoz