移动端类似这样的效果,超过两行展示【省略号】和一个下箭头
点击下箭头后的效果:(全行展开)
实现方案一: 采用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