前端多行文本超出省略方法兼容所有浏览器

前端

2023-09-23 11:59:14

前言

在前端开发中，经常会遇到多行文本超出容器的情况。此时，我们需要对文本进行省略，以保证文本在容器中能够正常显示。目前，有很多种方法可以实现文本省略，但并不是所有的方法都兼容所有的浏览器。本文将介绍一种兼容所有浏览器的文本省略方法。

方法介绍

该方法传入两个参数，1：需要做省略的dom的行高，2：行数。3：dom元素。

通过递归的方式来获取到需要的行数的所有文案，将最后替换为...，生成新的html文本，来替换原来的html文本。

参数1,2可以合并，直接算出需要的行数的高度,还能省一步计算高度（var t = h*n）。

代码实现

<div id="text">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget lacus eget nunc luctus ullamcorper. Mauris eget tempor leo. Donec eget egestas libero, sit amet scelerisque ante. Cras eget dignissim dui. Fusce eget blandit massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas eget lacus eget nunc luctus ullamcorper. Mauris eget tempor leo. Donec eget egestas libero, sit amet scelerisque ante. Cras eget dignissim dui. Fusce eget blandit massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas eget lacus eget nunc luctus ullamcorper. Mauris eget tempor leo. Donec eget egestas libero, sit amet scelerisque ante. Cras eget dignissim dui. Fusce eget blandit massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
</div>

function textEllipsis(dom, h, n) {
  var text = dom.innerText;
  var t = h * n;
  var p = document.createElement("p");
  p.innerHTML = text;
  p.style.height = t + "px";
  p.style.overflow = "hidden";
  var height = p.scrollHeight;
  if (height > t) {
    var str = "";
    for (var i = 0; i < text.length; i++) {
      str += text[i];
      p.innerHTML = str + "...";
      height = p.scrollHeight;
      if (height > t) {
        str = str.substring(0, str.length - 1);
        break;
      }
    }
    dom.innerText = str + "...";
  }
}

var text = document.getElementById("text");
textEllipsis(text, 20, 3);