文本溢出省略

项目中常常遇到文本溢出显示省略号，一般来说，大致分为二种

单行文本

文本在一行显示，在末尾显示省略号，或者在中间显示省略号

末尾省略

实现简单，只需要css即可实现，给固定宽度

.textEllipsis {
  width: 200px; // max-width: 200px; 看情况而定
  overflow: hidden;
  white-space: noWrap;
  text-overflow: ellipsis;
}

中间省略

利用js实现中间省略，主要用模板字符串拼接，然后用slice方法进行字符串截取

	
/**
 * @desc 一行文件中间展示省略号
 * @param str 要省略的字符串
 * @param strOver 超过几个字符省略
 * @param startShow 前面展示几个 字符
 * @param endShow  后面展示几个字符 
 * 默认 10个字符开始展示省略，前面默认6，后面默认3
 */

export const strOmission = (str:string, strOver: number, startShow = 6, endShow = 3) => {

  if (typeof(str) !== "string") {
    return false
  }

  if (str.length > strOver) {
    
    if (str.length <= startShow || (str.length - endShow) < 1 ) {
      return str
    }

    if (startShow < 1 || endShow < 1) {
      return str
    }

    if (startShow + endShow > str.length -1) {
      return str
    }
    

    return `${str.slice(0, startShow)}...${str.slice(str.length - endShow)}`
  } 
  
  return str
  
}

	

// 获取字符串字节数
 export function getStringByteLength(val) {
  let Zhlength = 0; // 全角
  let Enlength = 0; // 半角
  for (let i = 0; i < val.length; i++) {
    if (val.substring(i, i + 1).match(/[^\x00-\xff]/gi) != null) Zhlength += 1;
    else Enlength += 1;
  }
  // 返回字符串字节长度
  return Zhlength * 2 + Enlength;
}

// 中间截断
export function ellipsisMiddle(str, start, end) {
  let result = '';
  let Zhlength = 0; // 全角
  let Enlength = 0; // 半角
  let isAddEllipsis = false;
  const val = String(str || '');

  for (let i = 0; i < val.length; i++) {
    const current = val.substring(i, i + 1);
    if (current.match(/[^\x00-\xff]/gi) != null) Zhlength += 1;
    else Enlength += 1;
    const len = Zhlength * 2 + Enlength;
    if (len <= start || len >= getStringByteLength(val) - end) {
      result += current;
    } else if (!isAddEllipsis) {
      result += '...';
      isAddEllipsis = true;
    }
  }
  return result;
}

多行文本

一般用js来判断实现，这里也可以用css简单实现。但是有兼容性

.textTwo {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2,
  work-break: break-all;
  overflow: hidden;
  text-overflow: ellopsis; 
}