js 内容超过两行收起，不超过两行正常展示

移动端类似这样的效果，超过两行展示【省略号】和一个下箭头
在这里插入图片描述

点击下箭头后的效果：（全行展开）
在这里插入图片描述

实现方案一：采用js的方式，首先判断元素是否超过了两行，超过的话截取前N个字符拼接上省略号 ... 展示；不超过两行正常展示。判断元素内容是否超过 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

js 内容超过两行收起，不超过两行正常展示

猜你喜欢