JavaScript 计算换行

2025年01月23日

柏拉文

越努力，越幸运

一、认识

---

二、实现

---

const isCJKCharacter = char => {
  return /[\u4e00-\u9fa5\u3040-\u30ff\u3130-\u318f\uac00-\ud7af]/.test(char);
};

const breakTextByLimit = (text, lineLimit, lineCharLimit) => {
  if (!text) return '';

  let currentLines = 1;
  let formattedText = '';
  let currentLineWidth = 0;
  const ellipsisChar = '…';
  const ellipsisWidth = 1;

  for (const char of text) {
    const charWidth = isCJKCharacter(char) ? 1 : 0.5;

    if (currentLineWidth + charWidth > lineCharLimit) {
      if (currentLines === lineLimit) {
        return formattedText.trimEnd() + ellipsisChar;
      }
      formattedText = formattedText.trimEnd() + '\n'; // 去除末尾空格再换行
      currentLines++;
      currentLineWidth = 0;
    }

    if (
      currentLines === lineLimit &&
      currentLineWidth + charWidth + ellipsisWidth > lineCharLimit
    ) {
      return formattedText + ellipsisChar;
    }

    formattedText += char;
    currentLineWidth += charWidth;
  }

  return formattedText;
};

三、测试

---

function test1() {
  const text = '这是一个很寂寞的天，下着有些伤心的雨';
  const result = breakTextByLimit(text, 2, 4);
  console.log(result);
}

function test2() {
  const text =
    'Kubernetes English Hello Wander Docusaurus Webpack RPpack Configure';
  const result = breakTextByLimit(text, 2, 4);
  console.log(result);
}

function test3() {
  const text =
    'これはテスト用のテキストです。テキストの改行方法をテストするためのものです。';
  const result = breakTextByLimit(text, 2, 4);
  console.log(result);
}

function test4() {
  const text =
    'Docusaurus 是一个由 Facebook 开源的用于构建、部署和维护开源项目网站的工具。';
  const result = breakTextByLimit(text, 2, 5);
  console.log(result);
}

function test5() {
  const text = 'Docusaurus Work';
  const result = breakTextByLimit(text, 2, 5);
  console.log(result);
}

function test6() {
  const text = 'Docusaurus Work';
  const result = breakTextByLimit(text, 2, 5);
  console.log(result);
}

function test7() {
  const text = '情默默如花落';
  const result = breakTextByLimit(text, 2, 5);
  console.log(result);
}

test1();
test2();
test3();
test4();
test5();
test6();
test7();