jsの内容が2行を超える場合は折りたたまれますが、2行以内であれば通常表示されます。

モバイル版にもこれと同様の効果があり、2 行以上の [省略記号] と下矢印が表示されます。

下矢印をクリックした後の効果: (全行が展開)

実装案 1:js要素が 2 行を超えるかどうかを判定し、超えた場合は最初の N 文字を切り取って省略記号で繋ぎ合わせて表示し、...2 行までは通常表示する方法を採用します。要素の内容が n 行を超えるかどうかを判断する方法は次のとおりです。

/**
 * 工具方法参数类型
 */
export interface MoreThanLineParams {
    
    
  containerClassName: string; // 父元素类名，需包含字号属性
  width: number; // 行宽度
  content: string; // 内容
  line?: number; // 行数
}
/**
 * 判断元素是否超过n行
 * 默认两行
 */
export const moreThanLines = ({
     
     
  containerClassName,
  content,
  width,
  line = 2,
}: MoreThanLineParams) => {
    
    
  let result = false;
  // 用于存放内容的元素
  const tempNode = document.createElement('div');
  tempNode.setAttribute('id', 'temp-node');
  tempNode.style.position = 'absolute';
  tempNode.style.visibility = 'hidden';
  // 将传递进来的类名和文本内容赋值
  tempNode.classList.add(containerClassName);
  tempNode.style.width = width + 'px';
  tempNode.innerHTML = content;
  const containerNode = document.body.appendChild(tempNode);
  // 用于计算行高的元素
  const dupNode = document.createElement('div');
  dupNode.classList.add(containerClassName);
  dupNode.style.width = width + 'px';
  dupNode.style.wordBreak = 'keep-all';
  dupNode.style.overflowWrap = 'normal';
  dupNode.style.whiteSpace = 'nowrap';
  dupNode.style.position = 'absolute';
  dupNode.innerHTML = content.substring(0, 2);
  dupNode.setAttribute('id', 'copy-node');
  const getLineHeightNode = document.body.appendChild(dupNode);

  if (containerNode.offsetHeight > getLineHeightNode.offsetHeight * line) {
    
    
    result = true;
  }
  document.body.removeChild(containerNode);
  document.body.removeChild(getLineHeightNode);
  return result;
};

参考記事：
【CSSテキスト切り詰めスキル】 https://zhuanlan.zhihu.com/p/35713421
【複数行テキストの展開と折りたたみ効果を実現するCSS】 https://github.com/sisterAn/blog/issues/120