如果字符串较长,则顶点截断字符串

在开发中，我们经常需要在列表、卡片、表单等场景中显示文本信息，但是如果文本信息较长，会影响页面的美观和用户的体验。因此，我们需要对长文本进行截断处理。

利用CSS实现截断

单行文本截断

如果文本信息是单行的，我们可以使用CSS的text-overflow属性实现截断。

.single-line {
  /* 单行文本超出部分省略号显示 */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

上面的代码中，overflow属性设置为hidden，表示超出部分隐藏。white-space属性设置为nowrap，表示强制不换行。text-overflow属性设置为ellipsis，表示超出部分用省略号显示。

多行文本截断

如果文本信息是多行的，我们可以使用CSS的display属性结合伪元素实现截断。

.multi-line {
  /* 多行文本超出部分省略号显示 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /*显示的行数*/
  overflow: hidden;
  text-overflow: ellipsis;
}

上面的代码中，display属性设置为-webkit-box，对文本进行单行显示。-webkit-box-orient属性设置为vertical，表示垂直排列。-webkit-line-clamp属性设置为3，表示显示的行数为3行。overflow属性设置为hidden，表示超出部分隐藏。text-overflow属性设置为ellipsis，表示超出部分用省略号显示。

利用JavaScript实现截断

如果需要支持动态截断或根据特定需求进行截断，我们可以使用JavaScript。

单行文本截断

function truncateText(str, len) {
  if (str.length > len) {
    return str.substring(0, len) + '...';
  } else {
    return str;
  }
}

上面的代码中，substring()方法截取字符串前n个字符，拼接省略号后返回。

多行文本截断

function truncateText(str, len, lines) {
  var arr = str.split('\n');
  for (var i = 0, len1 = arr.length; i < len1; i++) {
    if (arr[i].length > len) {
      arr[i] = arr[i].substring(0, len) + '...';
    }
    if (i >= lines) {
      arr.length = lines;
      break;
    }
  }
  str = arr.join('\n');
  return str;
}

上面的代码中，split()方法按回车符分割文本为数组，for循环遍历每行文本。如果行长度超过限定值，截取前n个字符并拼接省略号。如果行数超过限定值，用length属性截断数组，并结合join()方法合并文本并返回。