window.onload = () => {
  // 单行文本截断
  const singleEle = document.querySelector(".single .ellipsis.js");
  truncateText(singleEle, 200);
  // 多行文本截断
  const multipleEle = document.querySelector(".multiple .ellipsis.js");
  truncateText(multipleEle, 200, 3);
};

function truncateText(element, width, lineNum = 1) {
  const canvas = document.createElement("canvas");
  const context = canvas.getContext("2d");
  context.font = window.getComputedStyle(element).font;

  // Why trim? see: https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Whitespace
  // 某些情况下，可能需要将前后被trim的空白字符还原
  const text = element.textContent.trim();

  if (context.measureText(text).width <= width) return;

  const ellipsis = "\u2026"; // https://www.compart.com/en/unicode/U+2026
  let result = "",
    startIndex = 0;

  for (let i = 0; i < lineNum; i++) {
    let left = startIndex,
      right = text.length - 1;

    while (left <= right) {
      const mid = Math.floor((left + right) / 2);

      // 仅为最后一行的文本增加ellipsis符号
      const testText =
        lineNum === i + 1
          ? text.slice(startIndex, mid + 1) + ellipsis
          : text.slice(startIndex, mid + 1);

      if (context.measureText(testText).width <= width) {
        left = mid + 1;
      } else {
        right = mid - 1;
      }
    }

    result += text.slice(startIndex, right + 1);
    startIndex = right + 1;

    if (startIndex > text.length - 1) {
      break;
    } else {
      if (lineNum === i + 1) {
        // result += ellipsis;
        element.classList.add("use-pseudo");
      }
    }
  }

  element.textContent = result;
  element.style.width = `${width}px`;
}