开发中遇到的两种表格文本长度处理，即长文本截断

一、固定列宽，文本过长用省略号‘...’显示

方案：使用css实现（本例在angular环境）

:host ::ng-deep {
  .ant-table-small
    > .ant-table-content
    > .ant-table-body
    > table
    > .ant-table-tbody
    > tr
    > td {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

注意：如果表格行使用了nzWidth属性，则css需要设置最大宽度（实际上页面宽度会以nzWidth为准），否则html宽度无效。

二、根据字数长度截取：使用了angular的管道实现

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'stringCutOff'
})
export class StringCutOffPipe implements PipeTransform {

  transform(value: any, args?: any): any {
    let newStr = value;
    //默认字符串长度
    let defaultLength = 12;
    //计算字符长度
    let strEnLen = 0;
    let strCnLen = 0;
    //设置字符串截取长度，如果没有传参，就给默认长度defaultLength，用户输入参数按照中文字符计算，即2个字符。
    //截取长度转换成字符
    let strLength = args ? args * 2 : defaultLength * 2;
    let cutIndex = 0;
    for (let i = 0; i < value.length; i++) {
      if (value.charCodeAt(i) <= 255) { //如果是汉字，则字符串长度加2
        strEnLen++;
      } else {
        strCnLen += 2
      }
      //一个一个字符循环判断当前长度是否达到了截取长度，然后计算这段字符串中，中文字符和其他字符的数量
      if ((strEnLen + strCnLen) >= strLength) {
        cutIndex = i;
        break;
      }
    }
    if (value && strEnLen + strCnLen >= strLength) {
      newStr = value.substring(0, cutIndex) + '...'
    };
    return newStr;
  }

}

<td [title]="data.NAME" >{{data.NAME|stringCutOff:15}}</td>

注意：

（1）管道设置了默认截取长度和自定义长度。

（2）英文字符在这里设为半个长度，因为考虑到设置字符长度的常规思维是以汉字为参考的。而英文、符号等字体宽度差不多是半个汉字，所以为了使相同截取数量的纯汉字和中英文混合字段表现相同宽度，把字符设为半个长度处理。

（3）html中使用时，一定要加上title，不然无法查看被截取文本的完整信息。