如果太长,请剪切文本 javascript

在Web开发中，经常会遇到要限制文本长度的情况，有时候文字太多以至于无法完全显示在一行或一个容器内，这时候我们需要将文本截断。本文将介绍如何在JavaScript中对文本进行截断操作。

使用substr函数

substr函数是JavaScript内置的字符串函数，可以用于截取字符串的一部分。它有两个参数，第一个参数是截取的起始位置（从0开始计数），第二个参数是截取的长度。例如：

let str = "如果太长,请剪切文本javascript";
let newStr = str.substr(0, 5); // newStr为"如果太长"

我们可以用substr函数来实现简单的截断文本的功能。但是这种方式有一个缺点，就是无法根据文本宽度来自动截取，而只能根据字符个数来截取，导致在某些情况下截取后的文本长度不够或者过长，不够灵活。

使用CSS实现截断文本

在CSS中，我们可以使用text-overflow属性来实现文本截断。text-overflow属性有3种属性值：clip、ellipsis和string。clip表示截断文本并隐藏多余的部分，ellipsis表示截断文本并用省略号代替多余的部分，string表示截断文本并用指定字符代替多余的部分。例如：

.ellipsis {
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 溢出部分隐藏 */
  text-overflow: ellipsis; /* 多余部分用省略号代替 */
}

<div class="ellipsis">如果太长,请剪切文本javascript</div>

使用CSS实现文本截断的好处是可以自适应文本宽度，同时实现起来也非常简单。

使用JavaScript实现自适应截断文本

针对上述方法的缺点，在一些特殊需求下，我们可能需要自适应地对文本进行截断（根据容器宽度自动计算截断长度），而不是简单的根据字符个数进行截断。这时候，我们可以使用JavaScript实现。

一个实现自适应截断文本的简单算法如下：

1. 获取容器宽度和文本字体大小；
2. 获取文本宽度；
3. 如果文本宽度小于容器宽度，则不需要截断；
4. 如果文本宽度大于容器宽度，则按照二分法逐步缩小文本长度，直到文本宽度小于或等于容器宽度。

这个算法可以使用canvas来实现。

function cutText(text, width, fontSize) {
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');
  context.font = fontSize + 'px sans-serif';
  let w = context.measureText(text).width;
  if (w <= width) return text;
  let len = text.length;
  let left = 0, right = len - 1;
  while (left <= right) {
    let mid = Math.floor((left + right) / 2);
    let newStr = text.substr(0, mid) + '...';
    w = context.measureText(newStr).width;
    if (w <= width) {
      left = mid + 1;
    } else {
      right = mid - 1;
    }
  }
  return text.substr(0, left - 1) + '...';
}

上述代码中，cutText函数接受三个参数：text表示要截断的文本，width表示容器宽度，fontSize表示文本字体大小。cutText函数返回截断后的文本。

需要注意的是，使用canvas测量文本宽度时，需要先创建一个canvas元素，并获取到它的2D上下文对象context。我们可以先将canvas元素隐藏掉，计算完文本宽度后再将其移除。

function cutText(text, width, fontSize) {
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');
  const style = window.getComputedStyle(container);
  canvas.style.visibility = 'hidden';
  canvas.style.position = 'absolute';
  canvas.style.top = '-9999px';
  canvas.style.left = '-9999px';
  canvas.width = width;
  canvas.height = 2 * fontSize; // 这里的高度可以根据需要进行调整
  document.body.appendChild(canvas);
  context.font = fontSize + 'px sans-serif';
  let w = context.measureText(text).width;
  if (w <= width) return text;
  let len = text.length;
  let left = 0, right = len - 1;
  while (left <= right) {
    let mid = Math.floor((left + right) / 2);
    let newStr = text.substr(0, mid) + '...';
    w = context.measureText(newStr).width;
    if (w <= width) {
      left = mid + 1;
    } else {
      right = mid - 1;
    }
  }
  const result = text.substr(0, left - 1) + '...';
  document.body.removeChild(canvas); // 计算完后移除canvas元素
  return result;
}

以上就是在JavaScript中实现截断文本的三种方法：substr函数、CSS的text-overflow属性和自适应截断文本算法。根据不同的需求，可以选择不同的方法。