vant TextEllipsis 组件实现文字省略主要代码

最新推荐文章于 2024-08-01 00:31:40 发布

kilito_01

最新推荐文章于 2024-08-01 00:31:40 发布

阅读量1.1k

点赞数 1

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/kilito_01/article/details/132498202

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			p{
				width: 50%;
				line-height: 20px;
				font-size: 16px;
			}
		</style>
	</head>
	<body>
		<p>华人头条上线云公证，
		可以远程办理委托公证（买房、卖房、贷款、解押、办证）、出生公证、无犯罪公证、婚姻公证等
		，只要通过下面链接就可以办理~可添加微信15980217972 进行咨询，太方便了 </p>
		
		
		<script>
			let countNumTextFn = (dom,row,posi = 'end') => {
				let rows = row, // 最大显示行数，在截断文本前显示的行数（默认为1）
				  dots =  '...', // 省略号的字符（默认为... 
				  content =  dom.innerText, //需要截断的文本内容 
				  expandText =  '', // 当省略号折叠时显示的文本（默认为空）
				  collapseText =  '', // 当省略号展开时显示的文本（默认为空）
				  position =  posi; // 省略号在文本中的位置。可以是 'start'、'end' 或 'middle'（默认为 'end'）
				  
				  let text = ''; // 文本内容的响应式引用
				  const expanded = false; // 是否展开的响应式引用
				  let hasAction = false; // 是否显示展开/折叠操作的响应式引用
				  const root = dom; // 根元素的引用
				  
				  const actionText = expanded ? collapseText : expandText
					  
				const pxToNum = (value) => {
				  if (!value) return 0;
				  const match = value.match(/^\d*(\.\d*)?/);
				  return match ? Number(match[0]) : 0;
				};
				const calcEllipsised = () => {
				  const cloneContainer = () => {
				    if (!root)
				      return;
				    const originStyle = window.getComputedStyle(root);
				    const container2 = document.createElement("div");
				    const styleNames = Array.prototype.slice.apply(originStyle);
				    styleNames.forEach((name2) => {
				      container2.style.setProperty(name2, originStyle.getPropertyValue(name2));
				    });
				    container2.style.position = "fixed";
				    container2.style.zIndex = "-9999";
				    container2.style.top = "-9999px";
				    container2.style.height = "auto";
				    container2.style.minHeight = "auto";
				    container2.style.maxHeight = "auto";
				    container2.innerText = content;
				    document.body.appendChild(container2);
				    return container2;
				  };
				  const calcEllipsisText = (container2, maxHeight2) => {
					
				    const end = content.length;
				    const calcEllipse = () => {
				      const tail = (left, right) => {
				        if (right - left <= 1) {
				          if (position === "end") {
							  console.log(content.slice(0, left) + dots);
				            return content.slice(0, left) + dots;
				          }
				          return dots + content.slice(right, end);
				        }
				        const middle2 = Math.round((left + right) / 2);
				        if (position === "end") {
				          container2.innerText = content.slice(0, middle2) + dots + actionText;
				        } else {
				          container2.innerText = dots + content.slice(middle2, end) + actionText;
				        }
				        if (container2.offsetHeight > maxHeight2) {
				          if (position === "end") {
				            return tail(left, middle2);
				          }
				          return tail(middle2, right);
				        }
				        if (position === "end") {
				          return tail(middle2, right);
				        }
				        return tail(left, middle2);
				      };
				      container2.innerText = tail(0, end);
				    };
				    const middleTail = (leftPart, rightPart) => {
				      if (leftPart[1] - leftPart[0] <= 1 && rightPart[1] - rightPart[0] <= 1) {
				        return content.slice(0, leftPart[0]) + dots + content.slice(rightPart[1], end);
				      }
				      const leftMiddle = Math.floor((leftPart[0] + leftPart[1]) / 2);
				      const rightMiddle = Math.ceil((rightPart[0] + rightPart[1]) / 2);
				      container2.innerText = content.slice(0, leftMiddle) + dots + content.slice(rightMiddle, end) + expandText;
				      if (container2.offsetHeight >= maxHeight2) {
				        return middleTail([leftPart[0], leftMiddle], [rightMiddle, rightPart[1]]);
				      }
				      return middleTail([leftMiddle, leftPart[1]], [rightPart[0], rightMiddle]);
				    };
				    const middle = 0 + end >> 1;
				    position === "middle" ? container2.innerText = middleTail([0, middle], [middle, end]) : calcEllipse();
				    return container2.innerText;
				  };
				  const container = cloneContainer();
				  if (!container)
				    return;
				  const {
				    paddingBottom,
				    paddingTop,
				    lineHeight
				  } = container.style;
				  const maxHeight = Math.ceil((Number(rows) + 0.5) * pxToNum(lineHeight) + pxToNum(paddingTop) + pxToNum(paddingBottom));
				  if (maxHeight < container.offsetHeight) {
				    hasAction = true;
				    text = calcEllipsisText(container, maxHeight);
				  } else {
				    hasAction = false;
				    text = content;
				  }
				  document.body.removeChild(container);
				  // document.querySelector('p').innerText = text
				};
				calcEllipsised()
				
				return {
					text,
					content
				}
			}
			  // 设置省略的元素 必须要有行高和宽度  要不然代码会报错  
			  // 这里return 出来的值 只是测试  可自行添加
			let result = countNumTextFn(document.querySelector('p'),2)
			console.log(result);
		</script>
	</body>
</html>